VW结合rem进行移动端布局

时间:2021-10-12 20:08:18

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

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

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