使用css3:rem,让屏幕适配变得简单起来

最近写前端页面比较多，屏幕适配比较麻烦，写一堆的@media,min-width等，经同事指导，使用了css3的rem，感觉不能再爽了！！！

没时间写博客，这里就分条列述：

1. UI给我们设计稿，他的屏幕是1920*1080，图上已标注了针对这个分辨率各个元素的宽高（px）
2. 我们写页面要考虑到各个电脑分辨率的适配问题，如何做简单了？使用css3的rem。（关于rem，就是给html设置一个font-size：10px，此时1rem=10px,页面的其它元素都使用rem为单位,渲染页面时会换算成对应的px）

3. 具体步骤：（假设设计稿的宽度是N，这里简化为1920px）

   • 我们以设计稿为基准，1920px宽度的页面，设置html{font-size:100px}，此时，1rem=100px，编写页面时，我们根据设计稿给的某一元素宽，比如30px,写css就是：width:0.3rem;（这也是为什么要把html的font-size设置为100px的原因，很好换算，设计稿的px值除以100即可）

   • 根据设计稿写好页面，css都是以rem为单位的，此时适配其它分辨，我们只需要动态调整html{font-size:px}，计算出1rem的px值，使得不同分辨率，各个元素的占比一致。这里我们要理解: 1920px/100px = 968px/新的1rem

     document.documentElement.style.fontSize = document.documentElement.clientWidth*100 /1920  + 'px';

1. 这样做是比较省事省力的，事后针对特殊的分辨率，特殊的元素，我们也可以写一些特定的css样式就可以了，从此觉得前端页面好写多了，哈哈哈。