Wowoy：https://juejin.im/post/5de72b1f51882512360d3910
開啟一個移動端項目的基礎，首先是想好如何在代碼中實現移動端適配。之前沒有經驗，第一個項目里簡單粗暴地采用px寫死的方法，覺得不好，本項目采用的是像一位優秀同事習得的rem布局方法，它可以自適應不同屏幕尺寸的設備，簡單好用。
這里我們要用到兩種單位:
1.vw: viewport width，相對于視口的寬度；
1vw為視口寬度的1%，100vw為設備的寬度；
2.rem: 相對于根元素html的字體大小的單位；
比如2rem=2倍的根字體大小。
rem布局非常簡單，其基本原理就是根據屏幕不同的分辨率,動態修改根字體的大小,讓所有的用rem單位的元素跟著屏幕尺寸一起縮放,從而達到自適應的效果。
拿我的項目來舉例:我們的設計稿是按照iphone6來設計的（iphone6實際寬度 375px），而設計稿上的寬度是750px，之前是直接把所有尺寸/2，現在我會這樣實現自適應：
html {
//除以的7.5是根據設計稿的屏幕寬度來定的，
//這樣750px寬度下根元素字體大小則為750px/7.5=100px=1rem
font-size: calc(100vw / 7.5);
}
其中，100vw是設備寬度deviceWidth，這樣就實現了不同設備寬度下，動態修改根字體font-size的大小，比如：
deviceWidth = 320，font-size = 320 / 7.5 = 42.6667px //iphone5 deviceWidth = 375，font-size = 375 / 7.5 = 50px //iphone6,7,8 X deviceWidth = 414，font-size = 414 / 6.4 = 55.2px //iphone6,7,8 plus
所以設計思路就是，根據設計稿將html的font-size設置為100px。比如750的設計稿，就除以7.5。
這樣設計的原因是：實現適配只要在代碼里把寬高直接將設計稿的尺寸除以100即可，換算很方便。
比方設計稿上寬高300px、96px的元素，就可以在代碼中這么設置寬高
.test {
width: 3rem
height: .96rem
}
//反過來驗證下，iphone6，顯示寬度為3*50px=150px
但是我們又不能改變默認字體大小的展示，因此還要加一句#App的字體大小重置
html {
font-size: calc(100vw / 7.5);
}
#app {
font-size: initial;
//重置頁面字體大小恢復為瀏覽器默認16px，否則就顯示成50px了
}
以上設計思路的最大優點就是：方便計算。
