先前曾分享過「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就套用此樣式 /
}
/
@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中的設定，圖片自動切換成1000px×1000px高解析來呈現，這時就可保有清晰的影像。
[範例預覽]