移动端适配-px转成rem
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端适配-px转成rem相关的知识，希望对你有一定的参考价值。
参考技术A rem单位是相对于根节点的字体大小的，所以通过设置根节点的字体大小可以动态的改变rem的大小rem方案的原理其实就是，将每一个不同的屏幕划分成相同的份数，让同一个元素在不同的屏幕上占据相同比例的空间。1rem等于此页面html的font-size，rem可以理解为每份是多少px
比如，设计稿宽度为375px，将页面划分成10份，那么1rem=37.5px，如果有一个div宽度为37.5px，换算成rem为1rem。将375px宽的屏幕划分为10份，这个div宽度占一份。
即 document.body.clientWidth / 10
同理，如果我们想让1rem=10px，那么document.body.clientWidth / 37.5即可
npm install amfe-flexible
import 'amfe-flexible'
此时默认，1rem = 16px，可以看到Elements中 <html lang="en" style="font-size: 16px;">
在现在的htmlUI设计图中，右上角可选择切换单位，切换到 CSS Rem 16px，即可得到对应的rem标注，不需要手动换算
（若想更改rem和px的换算比例，参考第三步）
此时 1rem = 10px，可以看到Elements中 <html lang="en" style="font-size: 10px;">
以上是关于移动端适配-px转成rem的主要内容，如果未能解决你的问题，请参考以下文章
移动端最强适配（rem适配之px2rem）&& 移动端结合Vuex实现简单loading加载效果