設(shè)備像素(物理像素)和CSS像素(邏輯像素)
- 設(shè)備像素
設(shè)備像素指的就是設(shè)備常說(shuō)的分辨率。如iPhone6分辨率為750*1334，則iPhone的屏幕橫向共有750個(gè)物理像素，縱向共有1334個(gè)像素。設(shè)備的物理像素是不會(huì)變的。
- CSS像素
CSS像素是獨(dú)立于設(shè)備的邏輯像素,前端布局所用的像素就是指的CSS像素。一個(gè)CSS像素在屏幕上所占的位置大小不是固定的，和屏幕的縮放有關(guān)。
- 設(shè)備像素比(device pixel ratio)
DPR在縮放比例為1的情況下：
設(shè)備像素比(DPR) = 設(shè)備像素個(gè)數(shù) / 理想視口CSS像素個(gè)數(shù)
例如iPhone6的DPR為2, 其分辨率為750*1334, 理想視口為375*667.
移動(dòng)端的三個(gè)視口
在PC瀏覽器中，視口只有一個(gè)，并且 視口的寬度 = 瀏覽器窗口的寬度
- 視覺(jué)視口
視覺(jué)視口即屏幕所看到的區(qū)域。
- 布局視口
前端所做的布局多是基于布局視口的,在移動(dòng)端布局視口和瀏覽器窗口沒(méi)有關(guān)聯(lián),正常情況下，布局視口要比瀏覽器窗口要大。
布局視口跟視覺(jué)視口不一樣，它不是指設(shè)備屏幕區(qū)域，它是為了解決PC 端網(wǎng)站在移動(dòng)端顯示不佳的一個(gè)解決方案。布局視口通常比設(shè)備屏幕寬得多，一般為980px，但也不是唯一，在不同的瀏覽器中也會(huì)有所不同如：在Safari iPhone中布局視口的寬為980px，在Opera中布局視口寬為850px ，在Android WebKit 中布局視口寬為800px，而在IE中布局視口寬為974px。
可以通過(guò)document.documentElement.clientWidth/Height獲取瀏覽器的布局視口的寬度和高度。
- 理想視口
理想視口即理想的布局視口。在開(kāi)發(fā)移動(dòng)端頁(yè)面時(shí)，在head中加入
< meta name="viewport" content="width=device-width initial-scale=1.0">
上面那段代碼告訴瀏覽器：將布局視口的寬度設(shè)為理想視口。所以，上面代碼中的width指的是布局視口的寬 device-width 實(shí)際上就是理想視口的寬度。
initial-scale控制布局視口CSS像素的縮放。
initial-scale會(huì)影響布局視口CSS像素個(gè)數(shù)。
理想布局視口CSS像素個(gè)數(shù) = 設(shè)備分辨率 / DPR
媒體查詢(xún)
@media 媒體類(lèi)型 and (max-width : 400px) and (min-width : 310px){
}
媒體查詢(xún)特定條件下使用指定的樣式。上述max-width指布局視口的width不大于某一值。
還原設(shè)計(jì)稿
在移動(dòng)端頁(yè)面開(kāi)發(fā)中,設(shè)計(jì)稿一般是以iPhone6為標(biāo)準(zhǔn)的, 寬度為750px。為了在不同屏幕上適配，元素就不能用絕對(duì)大小的單位，需要使用相對(duì)單位。
- rem
rem即根元素html標(biāo)簽font-size的大小。如html標(biāo)簽的font-size為12px,則1rem = 12px。
在開(kāi)發(fā)移動(dòng)端頁(yè)面時(shí)常使用rem。
為了方便計(jì)算，將px單位轉(zhuǎn)換為rem, 可以設(shè)置html的font-size為100px, 則設(shè)計(jì)稿的寬度為7.5rem.
對(duì)于不同分辨率的移動(dòng)設(shè)備，只需根據(jù)布局視口寬度，設(shè)置合適的font-size大小，則實(shí)現(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>
參考
一篇真正教會(huì)你開(kāi)發(fā)移動(dòng)端頁(yè)面的文章(一)
一篇真正教會(huì)你開(kāi)發(fā)移動(dòng)端頁(yè)面的文章(二)
