設備像素(物理像素)和CSS像素(邏輯像素)
- 設備像素
設備像素指的就是設備常說的分辨率积瞒。如iPhone6分辨率為750*1334精肃，則iPhone的屏幕橫向共有750個物理像素，縱向共有1334個像素恤左。設備的物理像素是不會變的世杀。
- CSS像素
CSS像素是獨立于設備的邏輯像素,前端布局所用的像素就是指的CSS像素。一個CSS像素在屏幕上所占的位置大小不是固定的鸣皂，和屏幕的縮放有關。
- 設備像素比(device pixel ratio)
DPR在縮放比例為1的情況下：
設備像素比(DPR) = 設備像素個數(shù) / 理想視口CSS像素個數(shù)
例如iPhone6的DPR為2, 其分辨率為750*1334, 理想視口為375*667.
移動端的三個視口
在PC瀏覽器中，視口只有一個寞缝，并且 視口的寬度 = 瀏覽器窗口的寬度
- 視覺視口
視覺視口即屏幕所看到的區(qū)域癌压。
- 布局視口
前端所做的布局多是基于布局視口的,在移動端布局視口和瀏覽器窗口沒有關聯(lián),正常情況下，布局視口要比瀏覽器窗口要大荆陆。
布局視口跟視覺視口不一樣措拇，它不是指設備屏幕區(qū)域，它是為了解決PC 端網(wǎng)站在移動端顯示不佳的一個解決方案慎宾。布局視口通常比設備屏幕寬得多，一般為980px浅悉，但也不是唯一趟据，在不同的瀏覽器中也會有所不同如：在Safari iPhone中布局視口的寬為980px，在Opera中布局視口寬為850px 术健，在Android WebKit 中布局視口寬為800px汹碱，而在IE中布局視口寬為974px。
可以通過document.documentElement.clientWidth/Height獲取瀏覽器的布局視口的寬度和高度荞估。
- 理想視口
理想視口即理想的布局視口咳促。在開發(fā)移動端頁面時，在head中加入
< meta name="viewport" content="width=device-width initial-scale=1.0">
上面那段代碼告訴瀏覽器：將布局視口的寬度設為理想視口勘伺。所以跪腹，上面代碼中的width指的是布局視口的寬 device-width 實際上就是理想視口的寬度。
initial-scale控制布局視口CSS像素的縮放飞醉。
initial-scale會影響布局視口CSS像素個數(shù)冲茸。
理想布局視口CSS像素個數(shù) = 設備分辨率 / DPR
媒體查詢
@media 媒體類型 and (max-width : 400px) and (min-width : 310px){
}
媒體查詢特定條件下使用指定的樣式。上述max-width指布局視口的width不大于某一值缅帘。
還原設計稿
在移動端頁面開發(fā)中,設計稿一般是以iPhone6為標準的, 寬度為750px轴术。為了在不同屏幕上適配，元素就不能用絕對大小的單位钦无，需要使用相對單位逗栽。
- rem
rem即根元素html標簽font-size的大小。如html標簽的font-size為12px,則1rem = 12px失暂。
在開發(fā)移動端頁面時常使用rem彼宠。
為了方便計算，將px單位轉換為rem, 可以設置html的font-size為100px, 則設計稿的寬度為7.5rem.
對于不同分辨率的移動設備弟塞，只需根據(jù)布局視口寬度兵志，設置合適的font-size大小，則實現(xiàn)了等比例縮放宣肚。
可以使用以下代碼
<meta name="viewport" content="width=device-width initial-scale=1.0 user-scalable=no">
<style>
html{
width : 7.5rem;
}
</style>
<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'
</script>
參考
