前言
隨著2012年蘋果發(fā)布第一款Retina Macbook Pro（以下簡稱RMBP），Retina屏幕開始進(jìn)入筆記本行業(yè)池户。兩年過去了黎比，RMBP的市場占有率越來越高斩郎，且獲得了一大批設(shè)計師朋友的青睞第步，網(wǎng)站對于Retina屏幕的適配也變成了迫在眉睫的問題疮装。
如果大家對于Retina適配的重要性不是特別清楚，請看我的兩個截圖：
上圖是Google的首頁LOGO粘都，我們對比下圖SOSO的LOGO：
如果大家還是看不出來廓推，請自行訪問這兩個網(wǎng)站或者下載附件的截圖對比。
說完了重要性翩隧，適配Retina的原理又是什么呢樊展？我們知道，當(dāng)一個圖像在標(biāo)準(zhǔn)設(shè)備下全屏顯示時，一位圖像素對應(yīng)的就是一設(shè)備像素专缠，導(dǎo)致一個完全保真的顯示雷酪，因?yàn)橐粋€位置像素不能進(jìn)一步分裂。而當(dāng)在Retina屏幕下時藤肢，他要放大四倍來保持相同的物理像素的大小太闺，這樣就會丟失很多細(xì)節(jié)糯景，造成失真的情形嘁圈。換句話說，每一位圖像素被乘以四填補(bǔ)相同的物理表面在視網(wǎng)膜屏幕下顯示蟀淮。（摘自《走向視網(wǎng)膜（Retina）的Web時代》）
對此最住，解決方法相信大家也都聽過，就是通過制作兩種不同的圖形怠惶，一張是普通屏幕的圖片涨缚，另外一種是Retina屏幕的圖形，而且Retina屏幕下的圖片是普通屏幕的兩倍像素策治。
原理雖然簡單脓魏，在現(xiàn)實(shí)中要實(shí)現(xiàn)就不僅僅如此，需綜合考慮加載速度通惫，瀏覽器適配等多方面因素茂翔，本文就是教大家如何對Retina的屏幕進(jìn)行適配。
正文
1.直接加載2倍大小的圖片履腋。
假如要顯示的圖片大小為200px300px珊燎，你準(zhǔn)備的實(shí)際圖片大小應(yīng)該為400px600px，并且使用以下代碼控制即可：
這種方法就解決了Retina顯示不清楚的問題遵湖，但是在普通屏幕下悔政，這種圖片要經(jīng)過瀏覽器的壓縮，在IE6和IE7上有十分差得顯示效果延旧，同時谋国，兩倍大小的圖片勢必會導(dǎo)致頁面加載時間加長，用戶體驗(yàn)下降迁沫，此時烹卒，我們可以通過Retina.js（http://retinajs.com/）文件解決：
<script type="text/javascript">
$(document).ready(function () {
if (window.devicePixelRatio > 1) {
var images = $("img.pic");
images.each(function(i) {
var x1 = $(this).attr('src');
var x2 = x1.replace(/(.*)(.w+)/, "$1@2x$2");
$(this).attr('src', x2);
});
}
});
</script>
2.Image-set控制
假如要顯示的圖片大小為200px300px，你準(zhǔn)備的圖片應(yīng)有兩張：一張大小為200px300px弯洗，命名為pic.png旅急；另一張大小為400px*600px，命名為pic@2x.png（@2x是Retina圖標(biāo)的標(biāo)準(zhǔn)命名方式）牡整，然后使用以下css代碼控制：
#logo {
background: url(pic.png) 0 0 no-repeat;
background-image: -webkit-image-set(url(pic.png) 1x, url(pic@2x.png) 2x);
background-image: -moz-image-set(url(pic.png) 1x,url(images/pic@2x.png) 2x);
background-image: -ms-image-set(url(pic.png) 1x,url(images/pic@2x.png) 2x);
background-image: -o-image-set(url(url(pic.png) 1x,url(images/pic@2x.png) 2x);
}
或者使用HTML代碼控制亦可：
3.使用@media控制
實(shí)際是判斷屏幕的像素比來取舍是否顯示高分辨率圖像藐吮，代碼如下：
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5), /* 注意這里的寫法比較特殊 */
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
#logo {
background-image: url(pic@2x.png);
background-size: 100px auto;
}
}
使用這個的確定就是IE6、7、8不支持@media谣辞，所以無效迫摔。但是如果你只是支持蘋果的RMBP的話，不存在兼容問題泥从，因?yàn)镸acOS X上壓根沒有IE句占！哈哈哈！
本文摘自JsonChen的博客躯嫉，原文鏈接：http://www.ui.cn/detail/24556.html
