0

レスポンシブ Web デザインは初めてで、現在の大きな画像を非表示にして、画面幅が 480 ピクセル未満の場合に新しい小さな画像を表示しようとしています。

これは、デスクトップ ブラウザーの幅を縮小するとうまくいくようですが、携帯電話でページに移動すると、まだ大きな画像が表示されたままです。

私が試しているコード:

html:

<div id="wrapper">
    <img src="lrgimg" id="lrgimg" alt="" />
    <img src="smlimg" id="smlimg" alt="" />
    <p>Some text , font size will change depending on device width.</p>
</div>

CSS:

#wrapper{
    margin-right:0 auto;
    margin-left:0 auto;
    padding:10px;
    width:80%;
    border:1px solid red;
}
#smlimg{
    display:none;
    max-width:100%;
    max-height:100%;
}
#lrimg{
    max-width:100%;
    max-height:100%;
}

/* media queries */

@media screen and (max-width: 480px){

    #lrgimg{display:none;}
    #smlimg{display:inline;}

    p{
        font-size:30px;
    }

}

ほとんどの電話の画面幅を満たすのに十分だと思いmax-widthましたが、画面の幅が同じままであっても、解像度が大幅に向上したようです.

私の質問は次のとおりです@media。最新の携帯電話ブラウザーを満足させる、使用できる標準クエリはありますか?

ここにデモがあります

4

1 に答える 1

2

画面サイズによっては、480 ピクセルでも幅が広すぎる場合があります。@media screen and (max-width: 479px){(画面サイズが 480 の場合、480の画面幅がまだ含まれているため、それまで壊れません。@media screen and (max-width: 480px){

詳細な統計はこちら:モバイルとデスクトップの画面サイズの統計

于 2013-11-13T16:36:52.203 に答える