html 手机上按比例缩放,动态rem方案等比例缩放手机页面

这篇文章主要梳理阿里的动态rem方案。

需求：

在做手机页面的时候，经常会遇到一个问题，那就是随着智能手机的发展，各个屏幕尺寸的手机层出不穷，从宽度300px到420px的都有，当我们想要适配各种屏幕尺寸的手机时，一般来说会用媒体查询的方法，根据不同的尺寸单独写相应的CSS代码，这种方法虽然也能够实现适配的问题，但是针对每一个尺寸都要单独写对应代码，过于烦琐，因此就有了rem方案。

动态rem方案的基本思路：

rem方案就是页面所有元素的宽高、距离等等都用rem单位来表示，rem又和手机屏幕尺寸绑定，在不同的手机上，用一段JS代码来获取屏幕宽度，然后将rem以此为基准设置，然后相应元素的所有宽高距离等等都换算成rem单位。

var screenWidth = window.screen.width

这一行代码放在style标签上面script里，用于动态获取不同手机的具体宽度。

var css = `

html{

font-size:${screenWidth}px;

}

`

声明一个CSS，将1rem设置为屏幕宽度。

document.write(``)

在当前位置插入html的font-size，即1rem=屏幕宽度。接下来将页面当中所有元素的宽高距离等都改成rem单位即可。

**重新再理一下思路：先用JS获取当前屏幕宽度 > 把html的font-size也就是1rem设置成当前屏幕宽度 > 将页面所有的元素按照当前屏幕尺寸修改成rem单位 **

这样，因为屏幕宽度是用JS动态获取的，而元素的具体宽高距离等等都是基于屏幕宽度的，那么随着屏幕宽度的变化，页面内所有的元素都会进行相应的缩放。

有一个地方需要好好注意，那就是font-size问题，在谷歌浏览器里是有一个最小值的，如果设置的值小于这个最小值，那么浏览器会用最小值来覆盖，就会出bug，这里需要特别注意。