h5的rem代替px做移动端界面的自适应就是這么简单又强大

　　这两天要把公司以前的触屏设备的客户端应用做成h5的web应用，而且有针对不同设备和同一设备下的不同状态(有windows竖屏和横屏和android的平板)，而且都有设计师为其针对的不同设计标准包括字体大小和不同ui组件的大小，虽然当时经过讨论，公司老员工建议就按照這个标准去做，不用考虑自适应，因为设备就这几种，但是我是一直不甘心，总想把它做成能适配不同设备分辨率的东西，所以来研究這个问题(在了解rem之前，我会做自适应，但只是在做了布局上的自适应，不包括字体)。

　　因为在之前的公司做过的项目中的某些模块参照过别的产品，发现过有用rem和em的，然后就来网上研究学习了解了下这几种相对单位。其中就找到了这篇文章：http://isux.tencent.com/web-app-rem.html，发现这篇文章对除了rem来设计界面的其他方法做了介绍和总结。文章总结了rem相对于其他几种设计方法的好处，其他几种方法的坏处，具体那些坏处朋友可以去看下这篇文章。

　　

　　回归正题，我以前做界面就是上面那篇文章里提到的流式布局(主要用bootstrap栅格布局)，宽度百分比，高度固定（最开始我高度也百分比，显然不行），这种方式的坏处就是兼容性不是很好,只适应特定的几种分辨率，也不好维护。下面我就来介绍下最终我觉得很好的rem（如果设计师没用给出明确的组件大小，可以结合bootstrap栅格布局实现快速布局，并且后期可以改造成响应式布局，可以到bootstrap官网定制下载只包含栅格的css代码）。

　　

     下面是引用知乎的一位用户的回答：https://www.zhihu.com/question/21504656

 

 /***************START*************************************/

在移动端可以做到适配不同的手机分辨率，如果保持整体缩放，没有设计上的差异可以不需要用到`media query`

假设设计师的视觉稿是按照iPhone6的宽度来设计的，即375px (如果是高清的视觉稿750/2=375)
那么，我们可以完全按照视觉稿上的尺寸来赋值给元素的样式，比如视觉稿上的尺寸是80px，那么在css中就可以直接定义80px; 页面中所有的尺寸都这样来设置。

当所有的网站所有的页面样式都设置好之后。

我们需要做两件事情：
1. 设置页面的rem大小
```css

html {
font-size: calc(100vw/3.75);
}

```
100vw是设备的宽度，除以3.75可以让1rem的大小在iPhone6下等于100px

2. 替换页面中的单位，把所有的px单位替换成rem，除以100，比如前面的80px，就是0.8rem
这样在iPhone6下，所有元素的尺寸还是和视觉稿的尺寸一样，而iphone5中，因为设备的宽度变小了，100vw/3.75得到的值，会相应的变小，即rem的单位值会变小，页面中所有的尺寸会等比例缩放。

这样就可以做到针对任何分辨率的设备保持视觉一致了。
最后，前面用到vw单位，但是低版本的设备可能不支持，那么就需要js来处理一下：
```javascript

document.documentElement.style.fontSize = window.innerWidth/3.75 + 'px'

```

之所以前面让1rem等于100px，而不是1rem等于1px，是因为在chrome下针对中文的最小字体是12px，且QQ浏览器使用1rem=1px也会有兼容问题。

 

如果pc端要动态改变大小，可以加个窗体大小改变事件动态设置根元素fontSize

//针对1920设计稿

window.addEventListener(  "resize", () => {

        document.documentElement.style.fontSize = window.innerWidth/19.2 + 'px'

 }, false);

当然，这种步骤是针对现在的状况改rem来做的，如果一开始就是使用rem，那么写css的时候，可以直接写rem单位，按视觉稿除以100，其实也没有什么计算过程。或者用预处理器的话，也可以写一个`px2rem`的函数，直接改这个函数就可以了。

 

 /*************END******************************/

 

我的最终总结：我认为比较好的方式就是让1rem在设计师给的标准尺寸下等于100px,然后我们用的时候如果用到14px,直接用0.14rem替换就ok，然后通过js动态根据不同设备宽带给html的font-size进行计算。假如设计师设计的页面宽度尺寸是1080，js就這样写：

document.documentElement.style.fontSize = window.innerWidth/10.80 + 'px'，這样在1080设备上的html的font-size=100px，0.14rem就等于14px；
這样就能兼容不同设备分辨率了，比如，如果在2160px设备分辨率下，html的font-size经计算就等于200px,那么0.14rem=0.14rem*200=28px了。