0

当サイトでは現在、Picturefill (バージョン 2.2.0) を実装しています。画像要素は次のようになります。

<picture>
    <source media="{query_size1}" srcset="/images/size1.jpg"></source>
    <source media="{query_size2}" srcset="/images/size2.jpg"></source>
    <source media="{query_size3}" srcset="/images/size3.jpg"></source>
    <source media="{query_size4}" srcset="/images/size4.jpg"></source>
    <source media="{query_size5}" srcset="/images/size5.jpg"></source>
</picture>

ご覧のとおり、通常のメディア クエリとピクセル比率を考慮すると、複雑なメディア クエリを含む 1 つの画像に対して 5 つのソースがあります。このようなクエリは次のようになります。

(max-width: Xpx) and (-webkit-max-device-pixel-ratio: 1.0), 
(max-width: Xpx) and (-o-max-device-pixel-ratio: 1/1),   
(max-width: Xpx) and (max-resolution: 100dpi),
(max-width: Xpx)  and (-webkit-max-device-pixel-ratio: 1.5), 
(max-width: Xpx)  and (-o-max-device-pixel-ratio: 15/10), 
(max-width: Xpx)  and (max-resolution: 150dpi),
(max-width: Xpx)  and (-webkit-max-device-pixel-ratio: 2),
(max-width: Xpx)  and (-o-max-device-pixel-ratio: 2/1),
(max-width: Xpx)  and (max-resolution: 200dpi),
(max-width: Xpx)  and (-webkit-max-device-pixel-ratio: 2.4), 
(max-width: Xpx)  and (-o-max-device-pixel-ratio: 24/10), 
(max-width: Xpx)  and (max-resolution: 240dpi)

サイトに 10 枚の写真がある場合、10 X 5 = 50 の複雑な RegEx 計算。

ご意見をお聞かせいただければ幸いです... ;)

よろしくお願いします...

4

1 に答える 1