rem和vw布局主要都是為了更好地適配移動端，畢竟手機的型號太多了。
在進行移動端設計的時候，首先要引入一個meta標簽。（禁止用戶縮放）
1 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
我們在剛開始接觸移動端的時候，可能都會遇到這種情況：
PS中量取像素和web中手機預覽的大小不太一樣，似乎感覺web預覽效果上要比UI設計圖上的尺寸大。
這是因為手機顯示像素與我們用ps量取的像素有一定的比例！
在2010年，iPhone4發布會中，蘋果推出了“Retina”高清視網膜顯示屏。用易懂的白話來說就是能在1個像素單位里面顯示4個像素，也就是說如果你在ps中量取了一個1px寬，1px高的盒子，那么它在手機上就會顯示出看起來像2px寬，2px高盒子的樣子。如果想和設計圖相吻合，那就必須在量取的基礎上除以2。
市場上手機型號太多，屏幕大小也各自不同，所以要通過便於維護而且實際適用的方式來開發頁面。
1. 響應式布局 and 媒體查詢
響應式布局：根據當前不同設備，響應不同代碼。
媒體查詢：對設備提出詢問開始，如表達式結果為真，媒體查詢中的css被應用，如為假，則忽略。
1 @media all and (max-width:1040px) and (min-width:768px){ 2 div{width:31%;} 3 } 4 @media all and (max-width:767px) and (min-width:450px){ 5 div{width:45%;} 6 } 7 @media all and (max-width:449px){ 8 div{width:90%;} 9 }
其中，all代表所有設備。如果and后括號里為orientation:portrait，代表豎屏；為orientation:landscape，代表橫屏。
2. rem布局
所謂rem布局，就是結合媒體查詢，隨着設備的改變更改html的font-size值。
設備像素比（DPR）= 物理像素（PS中量取的） / 邏輯像素（手機所顯示的）
| 設備型號 | 設計圖尺寸 | DPR |
| iPhone4/4s | 640px | 2 |
| iPhone6/7/8 | 750px | 2 |
| iPhone6/7/8P | 1080px | 3 |
window.devicePixelRatio是設備上物理像素和設備獨立像素(device-independent pixels (dips))的比例。
以iphone4為例，設計圖為640px，那么我們就應將手機寬度設置為640/2 = 320px。如果一個div量取的寬度為10px，那么相應的在手機中的css寬度就應該設置為10 / 2 = 5px。
如果，html的font-size值為16px，那么 1rem = 16px；
3. vw布局
vw 當前設備屏幕寬度1/100響應式的值。
vh 當前設備屏幕高度1/100響應式的值。
vmin vw和vh中較小的
vmax vw和vh中較大的
100vw = 視口width的100%; 100vh = 視口height的100%。
注意：當出現垂直滾動條時，100vw≠width:100%; 100vw包含滾動條，width:100%不包含。
vw和rem相結合
為了方便計算，可以將html的font-size值設置為100px，但是100px是一個固定值，沒有辦法隨着設備的改變而改變。下面用vw來解決html的font-size問題。
第一種情況：
UI設計圖為750px => dpr為2 => 適配核心設備375px => 100vw = 375px => 1vw = 3.75px => 100px = 26.67vw 。
所以=> html{font-size:26.67vw};
如果量取一個盒子寬度為100px。那么css中就應該設置為0.5rem (100px / 2 = 50px，50px / 100 = 0.5rem)。.
第二種情況：
UI設計圖為640px => dpr為2 => 適配核心設備320px => 100vw = 320px => 1vw = 3.20px => 100px = 31.25vw 。
所以=> html{font-size:31.25vw};
如果量取一個盒子寬度為100px。那么css中就應該設置為0.5rem (100px / 2 = 50px，50px / 100 = 0.5rem)。
第...種情況：依次類推......
4. 網易適配
由於存在一種比例關系=>設計稿寬度 ： 設備寬度 = 設計稿中元素寬度 ： 設備中元素的寬度
得出 設備中元素寬度 = 設計稿中元素寬度 * 設備寬度 / 設計稿寬度
由於1rem = 根元素html 的font-size值。為了方便計算，給“公式中”設計稿元素寬度固定為100。那么每次量取元素時除以100，添加rem單位，即為設備中元素像素值。
設計稿寬度為750px，設備寬度為375，一div寬度為36px。
1.html的font-size設置為 100 * 設備寬度(375) / 設計稿寬度(750)
2.設備div寬度 = 設計稿中div寬度(36) * 設備寬度(375) / 設計稿寬度(750)
3.由於單位為rem，所以量取時除以100，添加rem單位。width:0.36rem
(36/100)rem = (36/100) * ((100 * 375) / 750) = 36 * 375 / 750 = 18px
轉換為vw方法 =>
1 font-size: calc(100vw/7.5); 2 font-size: -webkit-calc(100vw/7.5);