響應(yīng)式布局的實(shí)現(xiàn)依靠媒體查詢（ Media Queries ）來實(shí)現(xiàn)，選取主流設(shè)備寬度尺寸作為斷點(diǎn)針對(duì)性寫額外的樣式進(jìn)行適配满钟，但這樣做會(huì)比較麻煩，只能在選取的幾個(gè)主流設(shè)備尺寸下呈現(xiàn)完美適配院促。
即使是通過 rem 單位來實(shí)現(xiàn)適配醋虏，也是需要內(nèi)嵌一段腳本去動(dòng)態(tài)計(jì)算根元素大小。
近年來谭胚，隨著移動(dòng)端對(duì)視口單位的支持越來越成熟活尊、廣泛，使得我們可以嘗試一種新的辦法去真正地適配所有設(shè)備尺寸漏益。
認(rèn)識(shí)視口單位（ Viewport units )
首先蛹锰，我們要了解什么是視口。
在業(yè)界绰疤，極為推崇的一種理論是 Peter-Paul Koch (江湖人稱“PPK大神”)提出的關(guān)于視口的解釋——在桌面端铜犬，視口指的是在桌面端，指的是瀏覽器的可視區(qū)域；而在移動(dòng)端較為復(fù)雜癣猾，它涉及到三個(gè)視口：分別是 Layout Viewport（布局視口）敛劝、 Visual Viewport（視覺視口）、Ideal Viewport纷宇。
而視口單位中的“視口”夸盟，在桌面端，毫無疑問指的就是瀏覽器的可視區(qū)域像捶；但是在移動(dòng)端上陕，它指的則是三個(gè) Viewport 中的 Layout Viewport 。
[圖片上傳失敗...(image-53150e-1512720719307)]
根據(jù)CSS3規(guī)范拓春，視口單位主要包括以下4個(gè)：
-
vw
: 1vw 等于視口寬度的1%
-
vh
: 1vh 等于視口高度的1%
-
vmin
: 選取 vw 和 vh 中最小的那個(gè)
-
vmax
: 選取 vw 和 vh 中最大的那個(gè)
視口單位區(qū)別于%單位释簿，視口單位是依賴于視口的尺寸，根據(jù)視口尺寸的百分比來定義的硼莽；而%單位則是依賴于元素的祖先元素庶溶。
例如，在桌面端瀏覽器視口尺寸為650px懂鸵，那么 1vw = 650 * 1% = 6.5px（這是理論推算的出偏螺，如果瀏覽器不支持0.5px，那么實(shí)際渲染結(jié)果可能是7px）匆光。
兼容性
其兼容性如下圖所示套像，可以知道：在移動(dòng)端 iOS 8 以上以及 Android 4.4 以上獲得支持，并且在微信 x5 內(nèi)核中也得到完美的全面支持殴穴。
截圖來自Can I Use
利用視口單位適配頁面
對(duì)于移動(dòng)端開發(fā)來說凉夯，最為重要的一點(diǎn)是如何適配頁面，實(shí)現(xiàn)多終端的兼容采幌，不同的適配方式各有千秋劲够，也各有缺點(diǎn)。
就主流的響應(yīng)式布局休傍、彈性布局來說征绎，通過 Media Queries 實(shí)現(xiàn)的布局需要配置多個(gè)響應(yīng)斷點(diǎn)，而且?guī)淼捏w驗(yàn)也對(duì)用戶十分的不友好：布局在響應(yīng)斷點(diǎn)范圍內(nèi)的分辨率下維持不變磨取，而在響應(yīng)斷點(diǎn)切換的瞬間人柿，布局帶來斷層式的切換變化，如同卡帶的唱機(jī)般“咔咔咔”地一下又一下忙厌。
而通過采用rem單位的動(dòng)態(tài)計(jì)算的彈性布局凫岖，則是需要在頭部內(nèi)嵌一段腳本來進(jìn)行監(jiān)聽分辨率的變化來動(dòng)態(tài)改變根元素字體大小，使得 CSS 與 JS 耦合了在一起逢净。
有沒有辦法能夠解決這樣的問題呢哥放？
答案是肯定的歼指，通過利用視口單位實(shí)現(xiàn)適配的頁面，是既能解決響應(yīng)式斷層問題甥雕，又能解決腳本依賴的問題的踩身。
做法一：僅使用vw作為CSS單位
在僅使用 vw 單位作為唯一應(yīng)用的一種 CSS 單位的這種做法下，我們遵守：
1.對(duì)于設(shè)計(jì)稿的尺寸轉(zhuǎn)換為vw單位社露，我們使用Sass函數(shù)編譯
//iPhone 6尺寸作為設(shè)計(jì)稿基準(zhǔn)
$vw_base: 375;
@function vw($px) {
@return ($px / 375) * 100vw;
}
2.無論是文本還是布局高寬挟阻、間距等都使用 vw 作為 CSS 單位
.mod_nav {
background-color: #fff;
&_list {
display: flex;
padding: vw(15) vw(10) vw(10); // 內(nèi)間距
&_item {
flex: 1;
text-align: center;
font-size: vw(10); // 字體大小
&_logo {
display: block;
margin: 0 auto;
width: vw(40); // 寬度
height: vw(40); // 高度
img {
display: block;
margin: 0 auto;
max-width: 100%;
}
}
&_name {
margin-top: vw(2);
}
}
}
}
3.1物理像素線（也就是普通屏幕下 1px ，高清屏幕下 0.5px 的情況）采用 transform 屬性 scale 實(shí)現(xiàn)峭弟。
.mod_grid {
position: relative;
&::after {
// 實(shí)現(xiàn)1物理像素的下邊框線
content: '';
position: absolute;
z-index: 1;
pointer-events: none;
background-color: #ddd;
height: 1px;
left: 0;
right: 0;
top: 0;
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
-webkit-transform: scaleY(0.5);
-webkit-transform-origin: 50% 0%;
}
}
...
}
4.對(duì)于需要保持高寬比的圖附鸽，應(yīng)改用 padding-top 實(shí)現(xiàn)
.mod_banner {
position: relative;
padding-top: percentage(100/700); // 使用padding-top
height: 0;
overflow: hidden;
img {
width: 100%;
height: auto;
position: absolute;
left: 0;
top: 0;
}
}
由此，我們能夠?qū)崿F(xiàn)一個(gè)常見布局的頁面效果如下：
體驗(yàn)地址點(diǎn)擊此處
做法二：搭配vw和rem孟害，布局更優(yōu)化
這樣的頁面雖然看起來適配得很好拒炎，但是你會(huì)發(fā)現(xiàn)由于它是利用視口單位實(shí)現(xiàn)的布局挪拟，依賴于視口大小而自動(dòng)縮放挨务，無論視口過大還是過小，它也隨著視口過大或者過小玉组，失去了最大最小寬度的限制谎柄。
當(dāng)然，你可以不在乎這樣微小的不友好用戶體驗(yàn)惯雳，但我們還是嘗試下追求修復(fù)這樣的小瑕疵吧朝巫。
于是，聯(lián)想到不如結(jié)合rem單位來實(shí)現(xiàn)布局石景？rem 彈性布局的核心在于動(dòng)態(tài)改變根元素大小劈猿，那么我們可以通過：
- 給根元素大小設(shè)置隨著視口變化而變化的 vw 單位，這樣就可以實(shí)現(xiàn)動(dòng)態(tài)改變其大小潮孽。
- 限制根元素字體大小的最大最小值揪荣，配合 body 加上最大寬度和最小寬度
這樣我們就能夠?qū)崿F(xiàn)對(duì)布局寬度的最大最小限制。因此往史，根據(jù)以上條件仗颈，我們可以得出代碼實(shí)現(xiàn)如下：
// rem 單位換算：定為 75px 只是方便運(yùn)算，750px-75px椎例、640-64px挨决、1080px-108px，如此類推
$vw_fontsize: 75; // iPhone 6尺寸的根元素大小基準(zhǔn)值
@function rem($px) {
@return ($px / $vw_fontsize ) * 1rem;
}
// 根元素大小使用 vw 單位
$vw_design: 750;
html {
font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw;
// 同時(shí)订歪，通過Media Queries 限制根元素最大最小值
@media screen and (max-width: 320px) {
font-size: 64px;
}
@media screen and (min-width: 540px) {
font-size: 108px;
}
}
// body 也增加最大最小寬度限制脖祈，避免默認(rèn)100%寬度的 block 元素跟隨 body 而過大過小
body {
max-width: 540px;
min-width: 320px;
}
這里就不再給出截圖，但你可以點(diǎn)擊此處在線地址進(jìn)行體驗(yàn)刷晋。
小結(jié)
相對(duì)于做法一盖高，個(gè)人比較推崇做法二福压，有以下兩點(diǎn)原因：
第一，做法二相對(duì)來說用戶視覺體驗(yàn)更好或舞，增加了最大最小寬度的限制荆姆；
第二，更重要是映凳，如果選擇主流的rem彈性布局方式作為項(xiàng)目開發(fā)的適配頁面方法胆筒，那么做法二更適合于后期項(xiàng)目從 rem 單位過渡到 vw 單位。只需要通過改變根元素大小的計(jì)算方式诈豌，你就可以不需要其他任何的處理仆救，就無縫過渡到另一種CSS單位，更何況vw單位的使用必然會(huì)成為一種更好適配方式矫渔，目前它只是礙于兼容性的支持而得不到廣泛的應(yīng)用彤蔽。
