谈谈 H5 移动端适配原理

H5 移动端 开发的必不可少的一个环节就是 移动端网页的适配，因为 UI 通常只会提供大小固定的设计稿，而各种不同移动设备具有不同的页面分辨率和大小，所以适配的目的就是让一份设计稿在不同移动设备上表现出一致性。

虽然现如今各种插件都可以帮助我们快速配置完成，例如 lib-flexible、postcss-pxtorem、postcss-px-to-viewport 等等，但不少小伙伴在被问及相关原理时却很难说清楚，那么本篇文章我们就一起来探究一下其中原理吧！！！

CSS 中的尺寸单位

在了解具体的适配方案之前，我们先把 CSS 中适配会涉及到的相关尺寸单位进行一个了解吧，总结起来就是一句话：CSS 中的尺寸单位都是 相对长度单位，只是相对的目标不同。

px 像素单位

px 全称为 pixel（像素），它是相对于 屏幕显示器分辨率（桌面设定的分辨率，不是显示器的物理分辨率） 而言的，在 相同/不同 的设备上 1px 表示多个 设备像素。

当 一个像素点越大 时, 呈现的图像就会 越模糊；当一个像素点越小时, 像素点就会 越密集, 呈现的图像就会 越清晰。

em 相对单位

好多人都认为 em 就是相对于 父元素 font-size，实际上在不同的 CSS 属性当中使用 em 其相对的目标也是不同，如下：

1、用于 font-size 中则是相对于 父元素 font-size 大小

2、用于 其他属性（如 width，height） 中使用是相对于 自身 font-size 大小

值得注意的是，若当前元素/父元素 的 font-size 未设置，由于 font-size 属性值可被继承的原因，可逐级向上查找，最终找不到则相对于浏览器默认字体大小，即 font-size = 16px。

rem (root em) 相对单位

rem 是 CSS3 新增的一个相对单位，它只相对于 根元素 html 的 font-size 字体大小，rem 与 em 的区别在于：

• rem 相对于 html 根元素的，因此在 body 标签里面设置 font-size 是不起作用的

• 因此 rem 就可做到 目标元素 与 根元素 间保持 成比例 的大小关系，又可以避免字体大小逐层复合的连锁反应等，例如公共的字体大小可以在 body 中设置即可

  

  

vw 和 vh

vw 全称是 viewport width，代表的是 视口的宽度，相对于 视口 viewport 的 宽度

vh 全称是 viewport height，代表的是 视口的高度，相对于 视口 viewport 的 高度

vw 和 vh 是将 视口 宽/高 都分成 100 份，因此 100vw = 视口宽、100vh = 视口高

与之相关的还有 vmin 和 vm