CSS, CSS3, 網頁設計

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

梅干2017/01/26
梅問題-Retina高解析網頁圖片怎麼透過CSS media設定,讓Apple官網告訴你
  先前曾分享過「Retina.js」這外掛,來解決Retina高解析螢幕在瀏覽網頁時,圖片自動切換成高解析,讓圖片看起來是細緻,而不會因此感到模糊或鋸齒,由於Retina螢幕的Device Pixel Ratio大於1,意思就是說在Retina的螢幕中所顯示的每個像素,與對應到的實際像素是超過1倍以上,因此除了透過「Retina.js」來作設定外,也可透過CSS3的media屬性。
  而各位最常使用到media這屬性,則是用來設定RWD的網頁,透過media來設定螢幕的大小,進而變換版型的顯示大小,而media除了可設定螢幕的大小外,也可用來設定螢幕的解析,透過螢幕解析來切換高解析度的圖片,至於要如何使用,現在也一塊來看看!
Media Query基本語法
/* 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就套用此樣式 */}

有了這基本的概念後,接下來就透過media來設定螢幕的解析與實際的顯示像素。
#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*/}
}

#html
<div class="image"></div>

完成後,當螢幕非Retina時,圖片就會變成1x來顯示,就是500px×500px。
梅問題-Retina高解析網頁圖片怎麼透過CSS media設定,讓Apple官網告訴你
當是Retina的或高解析的螢幕時,CSS就會自動切到media中的設定,圖片自動切換成1000px×1000px高解析來呈現,這時就可保有清晰的影像。
梅問題-Retina高解析網頁圖片怎麼透過CSS media設定,讓Apple官網告訴你
[範例預覽]
UAG軍規iPhone防摔殼