layui移动端适配_移动端适配

一套代码对应一份设计稿，实现向上/向下兼容自适应布局方案对比

1.起步

1.1rem 是什么

rem(font size of the root element)是指相对于根元素``来做计算的字体大小单位。

e.g. 设置html { font-size: 75px }时，其他元素1rem = 75px，4rem = 300px

1.2vw 是什么

vw`是基于`viewport`视窗的长度单位。`1vw`等于`window.innerWidth`的`1%

e.g. 设备物理宽度为375px时，1vw = 3.75px

1.3dpr 是什么

设备像素比device pixel ratio简称dpr，即物理像素和设备独立像素的比值。

在web中，浏览器为我们提供了window.devicePixelRatio来帮助我们获取dpr。

iPhone 6、7、8`的实际物理像素是`750 x 1334`，在开发者工具中我们可以看到：它的设备独立像素是`375 x 667`，设备像素比`dpr`为`2

e.g. 如果给定一个元素的高度为200px(这里的px指物理像素，非CSS像素)，iphone6的设备像素比dpr = 2，我们给定的height应为200px/2=100dp。

postcss-px-to-viewport(饿了么移动端做法)

postcss-px-to-viewport`的做法其实没多大不同，它直接计算每个像素在设计稿中占据的`%`来输出`vw`，`rem

设计稿 = 375px 时

1. 转换 VW 方案