为什么移动端需要适配
移动端的尺寸是斜对角的长度，单位为英寸。
前言：缩放比例完全相同，也就是说，在不同机型上，每一行字的字数都是一样的。
设计稿按照 375 的尺寸设计 由于手机日新月异，每个品牌手机都有自己的物理分辨率，导致逻辑分辨率不同。 此时 375 的设计稿要想 100%的还原，几乎不太可能。
三个概念词：屏幕尺寸 物理分辨率 逻辑分辨率
屏幕尺寸：以屏幕对角线的长度来计量，单位为英寸。
分辨率：横向和纵向的像素个数 320*480 横向 320 个像素 纵向 480 个像素
分辨率低，像素个数少，单个像素尺寸比较大。 分辨率高，像素个数多，单个像素尺寸比较小。
像素：组成图像的最小单位
逻辑分辨率（独立分辨率）：如：2*2 个像素当一个像素用。
设备像素比（dpr）：物理像素分辨率和逻辑分辨率之比 （window.devicePixelRatio）
经典的 1px 问题：css 中的 1px 是逻辑像素，根据设备的 dpr 映射到设备，但是不同设备，物理像素不同，导致每个物理像素渲染出来的不同。
移动端如何适配
使用meta标签
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1;maximum-scale=1, user-scalable=no" />| 属性 | 含义 | 取值 |
|---|---|---|
| width | 视口的宽度，单位为像素 | 正整数或者设备宽度 device-width |
| initial-scale | 初始缩放值 | 整数或者小数 |
| minimum-scale | 最小缩放比例 | 整数或小数 |
| maximum-scale | 最大缩放比例 | 整数或小数 |
| user-scalable | 允许用户手动缩放页面 | yes 或 no 默认 yes |
解决适配的方法
使用 rem 适配
rem 是相对于根节点的 font-size 计算。 理论上来说，不同分辨率的机型，font-size 应该不同，所以应该借助 flexible 来动态计算 font-size，以此达到适配的目的
描述：px 是一个像素值，rem 和 em 是相对长度，只是 rem 是相对根节点计算，en 是相对父元素计算。
使用 vw、vh 布局
vh、vw 将可视化窗口的宽度 window.innerWidth 和高度 window.innerHeight 等分为 100 份。 可使用postcss-loader的postcss-px-to-viewport自动实现 px 到 vw 的转化 。
flex 布局
建议使用 flex 布局，根据实际需求选择搭配 vw 和 vh 或者 rem 的方案。
以上就是【H5移动端纯css适配】的全部内容了,欢迎留言评论进行交流!