VW结合rem进行移动端布局

标签：height   逻辑   例子   不同   结合   html   内容   div   页面   

---恢复内容开始---

html {

font-size：10vw；

}

div {

width: 1rem;

height: 1rem;

}

VW这个单位适合用来适应不同设备的

一个设备的宽度就为100VW

比如说屏幕375px的宽度可以写为100vw，同样的 750px的宽度也是100vw 

1vw=1%屏幕 的宽度

在上述例子中我们将根元素的字体大小也就是html的字体大小设置为10vw

• 当设备宽度为375px时 ，html的字体大小为37.5px;  而rem这个单位是根元素的倍数，1rem在这里就是37.5px；所以最终div的宽高均为37.5
• 当设备宽度为340px时 ，html的字体大小为34px; 1rem=34px ，最终div的宽高为34px；

在设计移动端页面时

1. 如果设计图为750px dpr=2 可以得出它的逻辑像素为375px  为了便于计算，我们将html的字体大小设为100px；在这里我们把这100px转换成vw单位  375px/100px = 100vw/x    最终得出X为26.7vw   这个就是我们要给html设置的字体大小                如果我们量的元素大小为100px 同样的要除以dpr 最终为50px 50px/100px=0.5vw   最终我们给这个元素大小设置为0.5vw即可 
2. 如果设计图为640px dpr=2 可以得出它的逻辑像素为320px  同理可得X为31.25vw
3. 如果设计图为1080px dpr=3 可以得出它的逻辑像素为360px 同理可以得到X为27.78vw  

---恢复内容结束---

VW结合rem进行移动端布局

标签：height   逻辑   例子   不同   结合   html   内容   div   页面   

原文地址：https://www.cnblogs.com/Kangchuijing/p/9649530.html