移动端H5页面适配问题研究_随笔

一. 元素的度量单位

1. px像素

2. em根据父元素来计算大小（项目中比较少用）

3. rem根据根节点(html)元素的font-size进行计算大小

4. vw/vh根据手机屏幕计算大小

5. rpx小程序特有单位

二. rem计算公式: 元素的宽度(高度)= html的font-size * rem

三. 使用rem进行移动端适配的原理

1. 以ipone6宽度作为参考,给它的根标签设置大小

2. 获取手机的屏幕宽度,根据屏幕宽度,以iphone作为参照物进行等比缩放

一. 用来根据手机宽度设置根元素字体的大小

二. px转成rem,免去我们手动输入rem

三. css的处理

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">

欢迎分享，转载请注明来源：内存溢出

移动端H5页面适配问题研究