VW结合rem进行移动端布局
Posted kangchuijing
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VW结合rem进行移动端布局相关的知识，希望对你有一定的参考价值。
---恢复内容开始---
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；
在设计移动端页面时
- 如果设计图为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即可
- 如果设计图为640px dpr=2 可以得出它的逻辑像素为320px 同理可得X为31.25vw
- 如果设计图为1080px dpr=3 可以得出它的逻辑像素为360px 同理可以得到X为27.78vw
---恢复内容结束---
以上是关于VW结合rem进行移动端布局的主要内容，如果未能解决你的问题，请参考以下文章