CSS CSS3 網頁開發

Retina高解析網頁圖片怎麼透過CSS3 media設定,讓Apple官網告訴你

梅干 2017/01/25

梅問題-Retina高解析網頁圖片怎麼透過CSS media設定,讓Apple官網告訴你

  先前曾分享過「Retina.js」這外掛,來解決Retina高解析螢幕在瀏覽網頁時,圖片自動切換成高解析,讓圖片看起來是細緻,而不會因此感到模糊或鋸齒,由於Retina螢幕的Device Pixel Ratio大於1,意思就是說在Retina的螢幕中所顯示的每個像素,與對應到的實際像素是超過1倍以上,因此除了透過「Retina.js」來作設定外,也可透過CSS3的media屬性。


  而各位最常使用到media這屬性,則是用來設定RWD的網頁,透過media來設定螢幕的大小,進而變換版型的顯示大小,而media除了可設定螢幕的大小外,也可用來設定螢幕的解析,透過螢幕解析來切換高解析度的圖片,至於要如何使用,現在也一塊來看看!


Media Query基本語法
[css]
/* 1.25 dpr /
@media
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi){
/
當DPR 1.25以上,與 min-resolution裝置解析在120dpi就套用此樣式 /

}
/
1.5 dpr /
@media
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi){
/
當DPR 1.5以上,與 min-resolution裝置解析在144dpi就套用此樣式 /
}

/ 2.0 dpr /
@media
(-webkit-min-device-pixel-ratio: 2.0),
(min-resolution: 192dpi){
/
當DPR 2.0以上,與 min-resolution裝置解析在192dpi就套用此樣式 */
}
[/css]


有了這基本的概念後,接下來就透過media來設定螢幕的解析與實際的顯示像素。
#css設定
[css]
/非Retina螢幕顯示此段樣式/
.image {
width: 500px;
height: 500px;
background-size: 500px 500px;
background-repeat: no-repeat;
background-image: url(intro_large.jpg);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){
.image{
background-image: url(intro_large_2x.jpg); /_2x的實際圖片尺寸為1000px×1000px/
}
}
[/css]
#html
[html]
<div class="image"></div>
[/html]
完成後,當螢幕非Retina時,圖片就會變成1x來顯示,就是500px×500px。
梅問題-Retina高解析網頁圖片怎麼透過CSS media設定,讓Apple官網告訴你
當是Retina的或高解析的螢幕時,CSS就會自動切到media中的設定,圖片自動切換成1000px×1000px高解析來呈現,這時就可保有清晰的影像。


梅問題-Retina高解析網頁圖片怎麼透過CSS media設定,讓Apple官網告訴你
[範例預覽]