✊不积跬步，无以至千里；不积小流，无以成江海

大屏适配的公式

假设设计稿的比例是16:9，那么我们期待显示的大屏素材如下图。

我们期待大屏能够实现左右/上下居中，无论大屏如何变化。（即实现响应式页面。）

如上，当我们页面变大时，我们期待原大屏大小保持比例的变大，变大至页面的宽度后，放置在页面左右居中的位置。

则变化的规律可由公式得到：

其中，

p为粉紫色的部分，表示显示内容的大小。

如果设备的宽高比大于16:9，即设备很宽，则设备的高度等比例放大16/9

如果设备的宽高比小于/等于16:9，即设备很高，那么宽度不用改变，就为设备的宽度。高度用宽度除以16/9。

rem计算的公式

计算rem能够帮助我们适配一个div。即它能够帮助我们把设计稿中一个div的大小等比例放大到大屏中。如下图。

则应遵循规律：

物体在页面中的尺寸 除以 页面的宽度；应该等于物体在设计稿中的尺寸 除以 设计中的宽度。然后在head中用js设置 1rem=Wp / 100。

则可以得到，物体在页面中的尺寸，即为 物体在设计稿中的尺寸 除以 设计中的宽度 ✖️ 100 ✖️ rem。

举例。如果某div在设计稿中长100 px，设计稿宽度1920 px，

那么该div在页面中长度为：100 / 1920 ✖️ 100rem。

最后可以写一个px函数来对应 100px对应的rem。