1，概念的認識
rem:相對長度單位。相對於根元素(即html元素)font-size計算值的倍數;
vw:相對於視口的寬度。視口被均分為100單位的vw;
vh:相對於視口的高度。視口被均分為100單位的vh;
vmax:相對於視口的寬度或高度中較大的那個。其中最大的那個被均分為100單位的vmax;
vmin:相對於視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin;
對於移動端開發來說，最為重要的一點是如何適配頁面，實現多終端的兼容，不同的適配方式各有千秋，也各有缺點。·
就主流的響應式布局、彈性布局來說，通過 Media Queries 實現的布局需要配置多個響應斷點，而且帶來的體驗也對用戶十分的不友好：布局在響應斷點范圍內的分辨率下維持不變，而在響應斷點切換的瞬間，布局帶來斷層式的切換變化，如同卡帶的唱機般“咔咔咔”地一下又一下。
而通過采用rem單位的動態計算的彈性布局，則是需要在頭部內嵌一段腳本來進行監聽分辨率的變化來動態改變根元素字體大小，使得 CSS 與 JS 耦合了在一起。
有沒有辦法能夠解決這樣的問題呢？
答案是肯定的，通過利用視口單位實現適配的頁面，是既能解決響應式斷層問題，又能解決腳本依賴的問題的。
做法一：僅使用vw作為CSS單位
在僅使用 vw 單位作為唯一應用的一種 CSS 單位的這種做法下，我們遵守：
1.對於設計稿的尺寸轉換為vw單位，我們使用Sass函數編譯
//iPhone 6尺寸作為設計稿基准
$vm_base: 375;
@function vw($px) {
@return ($px / 375) * 100vw;
}
2.無論是文本還是布局高寬、間距等都使用 vw 作為 CSS 單位·
.mod_nav {
background-color: #fff;
&_list {
display: flex;
padding: vm(15) vm(10) vm(10); // 內間距
&_item {
flex: 1;
text-align: center;
font-size: vm(10); // 字體大小
&_logo {
display: block;
margin: 0 auto;
width: vm(40); // 寬度
height: vm(40); // 高度
img {
display: block;
margin: 0 auto;
max-width: 100%;
}
}
&_name {
margin-top: vm(2);
}
}
}
}
3.1物理像素線（也就是普通屏幕下 1px ，高清屏幕下 0.5px 的情況）采用 transform 屬性 scale 實現。
//code from http://caibaojian.com/vw-vh.html
.mod_grid {
position: relative;
&::after {
// 實現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.對於需要保持高寬比的圖，應改用 padding-top 實現
.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;
}
}
做法二：搭配vw和rem，布局更優化
這樣的頁面雖然看起來適配得很好，但是你會發現由於它是利用視口單位實現的布局，依賴於視口大小而自動縮放，無論視口過大還是過小，它也隨着視口過大或者過小，失去了最大最小寬度的限制。·
當然，你可以不在乎這樣微小的不友好用戶體驗，但我們還是嘗試下追求修復這樣的小瑕疵吧。
於是，聯想到不如結合rem單位來實現布局？rem 彈性布局的核心在於動態改變根元素大小，那么我們可以通過：
- 給根元素大小設置隨着視口變化而變化的 vw 單位，這樣就可以實現動態改變其大小。
- 限制根元素字體大小的最大最小值，配合 body 加上最大寬度和最小寬度
這樣我們就能夠實現對布局寬度的最大最小限制。因此，根據以上條件，我們可以得出代碼實現如下：
//code from http://caibaojian.com/vw-vh.html
// rem 單位換算：定為 75px 只是方便運算，750px-75px、640-64px、1080px-108px，如此類推
$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
@return ($px / $vm_fontsize ) * 1rem;
}
// 根元素大小使用 vw 單位
$vm_design: 750;
html {
font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw;
// 同時，通過Media Queries 限制根元素最大最小值
@media screen and (max-width: 320px) {
font-size: 64px;
}
@media screen and (min-width: 540px) {
font-size: 108px;
}
}
// body 也增加最大最小寬度限制，避免默認100%寬度的 block 元素跟隨 body 而過大過小
body {
max-width: 540px;
min-width: 320px;
}