1

私は多くのimgを含むページを持っています。高解像度デバイス用に同じ img を、非高解像度用に他の img を持つように、img をバックグラウンドに配置しようとしています。2 つの質問があります。

  1. このメディアクエリは最新であり、すべての新しい高解像度デバイス、Apple Retina およびその他の新しい高解像度デバイスに役立ちますか?. すべてのデバイスに対して 1 つのメディア クエリを探しています。出来ますか？

  2. この場合、高解像度デバイスは非高解像度画像も読み込みますか? もしそうなら、高解像度デバイスに高解像度写真のみをロードさせるにはどうすればよいですか?

HTML:

<div class="photo"> </div>

CSS:

.photo {
    position:relative;
    margin:0 auto;
    width:980px; height:660px;

    background-image:url('img/normal/1.jpg');
    background-repeat:no-repeat;
    background-position:center;
    background-size:100%;
}

/* for all hi-res */
@media (-webkit-min-device-pixel-ratio: 1.5), 
       (min-resolution: 144dpi){ 
.photo { background-image:url('img/2x/1.jpg'); }
}
4

1 に答える 1