幹貨儲備：

物理像素、設備獨立像素和設備像素比

在CSS中我們一般使用px作為單位，需要註意的是，CSS樣式裏面的px和物理像素並不是相等的。CSS中的像素只是一個抽象的單位，在不同的設備或不同的環境中，CSS中1px所代表的物理像素是不同的。在PC端，CSS的1px一般對應著電腦屏幕的1個物理像素，但在移動端，CSS的1px等於幾個物理像素是和屏幕像素密度有關的。

物理像素（physical pixel）

物理像素又被稱為設備像素、設備物理像素、它是顯示器（電腦、手機屏幕）最小的物理顯示單位，每個物理像素由顏色值和亮度值組成。所謂的一倍屏、二倍屏（Retina）、三倍屏，指的是設備以多少物理像素來顯示一個CSS像素，也就是說，多倍屏以更多更精細的物理像素點來顯示一個CSS像素點，在普通屏幕下1個CSS像素對應1個物理像素，而在Retina屏幕下，1個CSS像素對應的卻是4個物理像素。

設備獨立像素（device-independent pixel）

設備獨立像素又被稱為CSS像素，是我們寫CSS時所用的像素，它是一個抽象的單位，主要使用在瀏覽器上，用來精確度量Web頁面上的內容。

設備像素比（device pixel ratio）

設備像素比簡稱dpr，定義了物理像素和設備獨立像素的對應關系：設備像素比 = 物理像素/設備獨立像素。

CSS的1px等於幾個物理像素，除了和屏幕像素密度dpr有關，還和用戶縮放有關系。例如，當用戶把頁面放大一倍，那麽CSS中1px所代表的物理像素也會減少一倍。

viewport

viewport就是設備上用來顯示網頁的那一塊區域，但viewport又不局限於瀏覽器可視區域的大小，它可能比瀏覽器的可視區域要大，也可能比瀏覽器的可視區域要小。在默認情況下，一般來講，移動設備上的viewport都是要大於瀏覽器可視區域的，這是因為考慮到移動設備的分辨率相對於桌面電腦來說都比較小，所以為了能在移動設備上正常顯示那些傳統的為桌面瀏覽器設計的網站，移動設備上的瀏覽器都會把自己默認的viewport設為980px或1024px（也可能是其他值，這個是由設備自己決定的），但帶來的後果就是瀏覽器會出現橫向滾動條，因為瀏覽器可視區域的寬度是比這個默認的viewport的寬度要小的。

明確三種不同的 viewport 視口：

visual viewport 可見視口，指屏幕寬度

layout viewport 布局視口，指DOM寬度

ideal viewport 理想視口，使布局視口就是可見視口即為理想視口

獲取屏幕寬度（visual viewport）的尺寸：

window.innerWidth/Height

獲取DOM寬度（layout viewport）的尺寸：

document.documentElement.clientWidth/Height

設置理想視口 ideal viewport：

<meta name="viewport" content="width=device-width，user-scalable=no，initial-scale=1.0，maximum-scale=1.0，minimum-scale=1.0">

該meta標簽的作用是讓layout viewport的寬度等於visual viewport的寬度，同時不允許用戶手動縮放，從而達到理想視口。

meta[name="viewport"]裏各參數的含義為：

width：設置 layout viewport 的寬度，為一個正整數，或字符串"width-device"；

initial-scale：設置頁面的初始縮放值，為一個數字，可以帶小數；

minimum-scale：允許用戶的最小縮放值，為一個數字，可以帶小數；

maximum-scale：允許用戶的最大縮放值，為一個數字，可以帶小數；

height：設置layout viewport的高度，這個屬性對我們並不重要，很少使用；

user-scalable：是否允許用戶進行縮放，值為 "no" 或 "yes"；

rem適配方案

適配是為了使頁面在不同手機設備上，相對保持統一的效果。移動端自適應方案很多，有百分比布局，彈性和模型布局等，但是最好用的要數 rem 布局了。

rem是相對於根元素的字體大小的單位，我們可以根據設備寬度動態設置根元素的 font-size，使得以 rem 為單位的元素在不同終端上以相對一致的視覺效果呈現。

如下是3種根據屏幕寬度設置rem基準值的方法：（註：為了換算方便，以下三種方法都用 1:100的比例，即 1rem = 100px）

用JS設置rem基準值：

移動端高清適配方案（解決圖片模糊問題、1px細線問題）