h5适配华为手机_手机端H5页面适配 踩坑

这两天在公司做手机端H5页面，第一次开发没什么经验，对rem, pt, ppi, dpr这些概念完全不懂，看了很多博客，现总结如下。

对于不同像素宽度的手机，如何做到每一个元素自动缩放？

rem: font size of the root element

rem作为一个单位，单位大小由它第一代老祖宗的font-size的大小决定，也就是html标签的font-size。例如我们设置html的font-size为10px，那么1.2rem就是12px，我们在所有需要用到px的地方全都使用rem来代替，这样我们只需要改变html的font-size就可以动态地改变内部所有元素的尺寸了。

实例

我们公司提供了宽度为375pt的设计图(pt后面会解释，暂时理解为px就好)。我以这个版本为基础来写页面。我设置html的font-size为10px，那么设计图上的所有关于pt的标注，我只要除以10，再加上rem作为单位就OK了。然后我只要在初始化页面的函数中加上如下代码，就完成了完美的适配。

let htmlFontSize = 10 * width / 375 + 'px'

document.getElementsByTagName('html')[0].style.fontSize = htmlFontSize

举个栗子：此时手机的宽度变成了414pt，那么根据公式，html的font-size动态地变成了11.04px，页面的其他元素也就跟着放大了。

PS：

375pt是iphone6/7/8的宽度。

414pt是iphone6/7/8 plus的宽度。