用于pc端與移動(dòng)端頁(yè)面的適配
1. 創(chuàng)建頁(yè)面時(shí)先將網(wǎng)頁(yè)的視口設(shè)置為完美視口
?????<meta name="viewport" content="width=device-width, initial-scale=1.0">寫(xiě)在heade中
2.了解vw
100vw = 一個(gè)視口寬度 (將視口大小分成100份捅彻，1vw=1%的視口大小)
所以可以根據(jù)設(shè)計(jì)圖的px寬度進(jìn)行計(jì)算得出？1px=男窟？vw
如：設(shè)計(jì)圖的寬度750px得：
????????????????100vw=750px
即：1px=100/750=0.133333333333333...vw
創(chuàng)建一個(gè)寬48px 盆赤，高35px大小的元素
100vw = 750px(設(shè)計(jì)圖的像素)?
0.1333333333333333vw = 1px
48px=48? X? 0.1333333333333333vw=6.4vw
35px =35 X 0.1333333333333333vw=4.667vw
既css可設(shè)置為
****{
width:6.4vw;
height:4.667vw;
}
3. 通過(guò)vm與rem進(jìn)行換算
（1 rem = 1 html的字體大小）
將大于12px（因?yàn)橛械臑g覽器（webkit）字體最小只能為12px）的值通過(guò)vw歉眷， html {font-size: ....vw;}換算成全局字體默認(rèn)大形（得到rem）
如：40px
?0.1333333vw = 1px
0.1333333vw*40px=5.3333vw
5.3333vw = 40px
通過(guò)設(shè)置font-size全局屬性
??????????????html {font-size: 5.3333vw;}
????????????????????得到：1 rem = 40 px；
創(chuàng)建一個(gè)48px x 35px大小的元素
就可以設(shè)置為1.2rem ?* 0.875rem的元素
既css可設(shè)置為
****{
width:1.2rem;
height:0.875rem;
}
簡(jiǎn)單總結(jié)
先求出等于1px的vw汗捡，在以vw通過(guò)?html {font-size: ....vw;}得出rem
進(jìn)行大小的設(shè)置淑际。
px-->vw-->rem
其實(shí)有人可能會(huì)覺(jué)得轉(zhuǎn)換到vw就可以了為什么還要用rem呢？
因?yàn)閱渭兪褂胿w進(jìn)行布局不能限制布局的寬度扇住，對(duì)于有這個(gè)需求的場(chǎng)景至少還是需要將vw和rem混用來(lái)處理邊界情況春缕。
