1

この問題があります...ページhttp://exploreprague.czを実行しています。右上隅にリボンがあります。しかし、タブレットで見ていると、メニューと重なっています。だから私は、別の写真（スタイルが違うだけでなく、リボンの種類も違う）を表示する方法があればうまくいくと考えました。しかし、それを実行できる HTML/CSS/JS トリックがあるかどうかはわかりません。ありがとう

4

2 に答える 2

1

レスポンシブ CSS の使用方法の例を次に示します。

        Large desktop 
        @media (min-width: 1200px) {
            #largeImage{
                 display: inline;
            }
            #smallImage{
                 display: none;
            }
        }

        Portrait tablet to landscape and desktop 
        @media (min-width: 768px) and (max-width: 979px) {
            #largeImage{
                 display: none;
            }
            #smallImage{
                 display: inline;
            }
        }

        Landscape phone to portrait tablet 
        @media (max-width: 767px) {
            /* do the same as tablets or include this width range in the tablet style*/
        }

        Landscape phones and down 
        @media (max-width: 480px) {
            /* do the same as tablets or include this width range in the tablet style*/}

画面の幅に応じて画像表示プロパティを設定するだけです。2つの画像を使用

display: none;

もう1つは次のとおりです。

display: inline;

狭い画面でそれらを切り替える

于 2013-04-10T10:02:53.750 に答える
1

目的を達成するためのより良い方法の 1 つは、 CSS3 メディア クエリを使用することです。

タブレット サイズの解像度を対象とする CSS ファイルではdisplay:none、その特定の画像を設定し、必要に応じて、より小さな解像度に適合する新しい画像に置き換えることができます。

例(iPad の縦向き/横向きの解像度):

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
  #oldImg { display:none; }
  #newImg { display:block; }
}
于 2013-04-10T09:53:16.043 に答える