本文過於陳舊，不建議閱讀！請查閱網上其他更新的內容！！
關於一些Retina，設備像素，移動適配的知識，網上一搜也是一大把，但是基本的東西並沒有變化太多。下面就我看過的一些有關於這方面的知識做一些總結（僅以個人的角度出發，所以有不全的地方還請大家諒解）。后面會有不定期的更新~每個知識點我都會在開關寫出引用地址，所以大家有不懂的可以看原文章~
一、關於設備像素比（devicePixelRatio）
所謂設備像素比（devicePixelRatio[dpr]）指的就是物理像素(physical pixel)和獨立像素(device-independent pixels [dips])的比例。
基本公式就是:設備像素比 = 物理像素 / 設備獨立像素 //在某個方向上，x或者y
物理像素：就是我們經常所說的分辨率，如iphone 6 的分辨率就是750x1334
獨立像素：就是手機的實際視窗，如iphone 6的視窗就是375x667
所以iphone 6的設備像素比 = 750/375 = 2
當devicePixelRatio值等於1時（也就是最小值），那么它普通顯示屏
當devicePixelRatio值大於1(通常是1.5、2.0)，那么它就是高清顯示屏。
二：適配方案
1.Media Queries媒體查詢（只能用於背景圖片）
通過-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進行媒體查詢，對不同dpr的設備，做一些樣式適配
1 .css{/* 普通顯示屏(設備像素比例小於等於1.3)使用1倍的圖 */ 2 background-image: url(img_1x.png); 3 } 4 @media only screen and (-webkit-min-device-pixel-ratio:1.5){ 5 .css{/* 高清顯示屏(設備像素比例大於等於1.5)使用2倍圖 */ 6 background-image: url(img_2x.png); 7 } 8 }
2.JavaScript的解決方案
使用js對“window.devicePixelRatio”進行判斷，然后根據對應的值給Retina屏幕選擇圖像。
1 $(document).ready(function(){ 2 if (window.devicePixelRatio > 1) { 3 var lowresImages = $('img'); 4 5 images.each(function(i) { 6 var lowres = $(this).attr('src'); 7 var highres = lowres.replace(".", "@2x."); 8 $(this).attr('src', highres); 9 }); 10 } 11 });
3.使用SVG矢量圖像
三：多屏適配布局問題
使用相對單位：rem
原理：針對不同手機屏幕尺寸和dpr動態的改變根節點html的font-size大小(基准值)。
任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符合: 1rem=16px。那么12px=0.75rem,10px=0.625rem。為了簡化font-size的換算，需要在css中的html選擇器中聲明font-size=62.5%，這就使rem值變為 16px*62.5%=10px, 這樣12px=1.2rem, 10px=1rem, 也就是說只需要將原來的px數值除以10，然后換上rem作為單位就行了。
當我們在根節點<html>上設置了font-size基准值以后，在文檔中有使用rem單位的屬性值都是相對於根節點font-size的一個相對值。比如說一些元素的屬性如width,height,margin等。也正是這個原因，現在很多網站的移動端網站都在使用rem單位作為適配工具。
注意事項：
1.整體的布局還是使用百分比
2.使用rem的最佳場景是,遇到例如多列帶有圖片的列表,常常需要圖片固定寬高比
3.研究了一些網站，比如淘寶，對字體字體一般情況建議使用px
4.出現1px像素線的地方，仍舊使用border-width:1px;而不是border-width:.1rem
根據JS來動態計算rem值：根據iPhone6設計稿動態計算rem值
使用的時候，請將下面的代碼放到頁面的頂部（head標簽內）；
1 /** 2 * [以iPhone6的設計稿為例js動態設置文檔 rem 值] 3 * @param {[type]} currClientWidth [當前客戶端的寬度] 4 * @param {[type]} fontValue [計算后的 fontvalue值] 5 * @return {[type]} [description] 6 */ 7 <script> 8 var currClientWidth, fontValue,originWidth; 9 //originWidth用來設置設計稿原型的屏幕寬度（這里是以 Iphone 6為原型的設計稿） 10 originWidth=375; 11 __resize(); 12 13 //注冊 resize事件 14 window.addEventListener('resize', __resize, false); 15 16 function __resize() { 17 currClientWidth = document.documentElement.clientWidth; 18 //這里是設置屏幕的最大和最小值時候給一個默認值 19 if (currClientWidth > 640) currClientWidth = 640; 20 if (currClientWidth < 320) currClientWidth = 320; 21 // 22 fontValue = ((62.5 * currClientWidth) /originWidth).toFixed(2); 23 document.documentElement.style.fontSize = fontValue + '%'; 24 } 25 </script>