一、vw是什么
vw就是視口的寬度淮椰，vw 是個(gè)相對(duì)單位五慈。
不管在什么屏幕下纳寂，我們的屏幕寬都是 100vw
二、如何根據(jù)vw布局
假設(shè)設(shè)計(jì)稿寬度是
750px
那么有等式1：
750px = 100vw
那么有等式2：
1px = 100vw/750
假設(shè)我們想實(shí)現(xiàn)
1rem = 100px泻拦，根據(jù)等式二毙芜，得出
1rem = 100px = 100*(100vw/750) = 13.33333vw
最后給
html的根元素設(shè)置字體大小值就為13.33333vw`
注意
- 這里的
1rem = 100px，好處是：- 只需要根據(jù)設(shè)計(jì)稿給的
px直接縮小100倍争拐，改單位為rem即可
三腋粥、詳細(xì)代碼
- 設(shè)置根元素的字體大小為
13.33333vw- 當(dāng)我們的設(shè)備屏幕
大于750的時(shí)候：
要設(shè)置body居中且最大寬度為750px
還要設(shè)置html的的字體大小不能大于100px（寬度不能超過(guò)設(shè)計(jì)稿最大寬度）
html {
font-size: 13.33333vw;
}
body {
max-width: 750px;
margin: 0 auto;
}
/* 當(dāng)設(shè)備寬度大于750的時(shí)候，根元素字體大小最大為100px */
@media screen and (min-width: 750px) {
html {
font-size: 100px;
}
}
四架曹、如何使用（px到rem的轉(zhuǎn)換）
如果設(shè)計(jì)稿給我們一個(gè)盒子寬是 350px 高是 400px
那么我們只要在數(shù)值的基礎(chǔ)上縮小 100倍即可
寬是 3.5rem高是 4rem
