在学习前端关于移动端适配、等比例缩放的时候,我们会引入到vm,rem和px的转换。
在学习转换的时候,是先从rem开始,好不容易理解了,又得去理解vm。
下面我来说说关于vm,rem,px之间的转换。
就举例来说
100vm = 375px
1vm=3.75px
我们在根目录会设置font-size大小
举例为设计375px的设计稿 font-size:100px;
那么设计为
1rem = 100px
100vm = 375px
1vm = 3.75px
1px = 0.2667vm
那么
将px转换为vm值时,就类似就算一个比例题
375px =100vm
100px = ?vm
即
1px = 0.2667vm
则100px = 26.67vm
此时将font-size设置为26.67vm
就可以实现移动端布局的等比例缩放。