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