用rem实现WebApp自适应的优劣分析

关于rem实现屏幕自适应布局的讨论还是比较多的，刚好我也看到使用rem实现自适应的web app，所以也来凑下热闹。

说起rem，免不了要联系到em、px，这里简单提提他们的定义和特点。

1. px：像素（Pixel），相对长度单位。像素px是相对于显示器屏幕分辨率而言的，手机上的100px和电脑上的100px其实绝对长度是不一样的，肉眼就能看出来，严谨的你可以用尺子量一下，这就是因为他们的分辨率不同。还有相当多的人认为px是绝对单位，这里告诉大家不要人与亦云，多思考。

2. em：相对于当前对象内文本的字体尺寸，会继承父级的字体尺寸。也就是说 1em=1*父级元素的font-size。明显，在多层嵌套的结构下使用em的话，由于层层继承的缘故，要确定最终呈现出来的尺寸会非常麻烦，过于混乱。

3. rem：相对于html根元素文本的字体尺寸，与中间层字体尺寸无关。也就是说 1rem=1*html元素的font-size。rem就相当于是一个全局缩放因子，改变它一个就可以缩放所有以它为单位的元素，只要将它与屏幕分辨率关联起来，就可以完成屏幕自适应展现。

关于rem实现自适应的具体解释可以看看isux组的这篇文章：https://isux.tencent.com/web-app-rem.html，里面实现自适应有两个途径，分别是media查询和js动态计算。提问区里面说到如果只是在页面底部用js动态计算的话，页面元素尺寸改变时会有一定的闪烁现象。建议是先在css里根据屏幕用@media初始化一遍html 的font-size，然后再用js计算。提问区里面还有人问js代码的，这样的问题博主都没兴趣回答了，我贴一份吧。

 <script>
         (function (doc, win) {
           var docEl = doc.documentElement,
             resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
             recalc = function () {
               var clientWidth = docEl.clientWidth;
               if (!clientWidth) return;
               docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
             };

           if (!doc.addEventListener) return;
           win.addEventListener(resizeEvt, recalc, false);
           doc.addEventListener('DOMContentLoaded', recalc, false);
         })(document, window);
 </script>

rem的优势                                                                                

使用rem的优势非常明显了，尤其是在现在屏幕分辨率千差万别的时代，只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放，所以设备上的展现都统一起来了。而且现在浏览器基本都已经支持rem了，兼容性也非常的好。在上文提问区中还有一些人说“QQX5内核浏览器不支持rem单位，在大部分android 机上的微信页面不起作用”，我表示没这样的事，还是那句话，多思考多验证。

rem的劣势                                                                                           

其实rem的优势也正是他的缺点，rem的屏幕自适应与当前两大平台的设计哲学不一致！从用户体验上来看，文字阅读的舒适度跟媒体介质大小是没关系的。简单的来说，你本来喜欢麻将那么大的红烧肉，一口一块爽爆了，但是服务员换了个大盘子，就给你上了砂锅那么大的一整块肉。因为盘子大了肉也要成比例放大~~

   VS    

无论盘子大小，你都希望能一口吃下那块肉，文字阅读也是一样。字体根据媒介缩放是因为屏幕太小的时候，为了呈现更多的内容，因为频繁翻页的用户体验也是很差的。另外，图片视频的尺寸不应该随意缩放，如果图片视频的宽高都用rem关联起来， 这样虽然是等比缩放了，但是有时候我们并不想图片被放大。你看下图，对吧。

   VS    

还有就是图片像素不高的时候，小屏到大屏的放大会让图片变模糊，这样还不如小尺寸看着顺眼。

关于优劣势的讨论可以看知乎上的讨论，我也引用了大神们的观点，标明一下出处哈。http://www.zhihu.com/question/21504656?

总体上来说，使用rem的优势远远大于劣势，对于上文提到的问题点，使用px+rem的方式还是可以得到很好的用户体验的。一般rem用于需要跟随屏幕变化的尺寸（这不是废话吗？），px用于字号，细边框等不应该随屏幕变化的元素上。在web APP中，rem的使用肯定会越来越普遍的，大家就慢慢探索吧。还是那句话，多思考，多从用户的角度思考问题，这才是前端思维。

PS：关于rem的一些小问题

1）html的font-size设置到12px以下还是会按照12px=1rem来计算，这样所有使用了rem单位的尺寸都是错的。原因看2)。话说，直接设置为100px不好么？body再设置要用的字号不就好了？

2）百度谷歌出来的结果里面，html{font-size:62.5%}的设置一大堆，不推荐使用这种方式，多此一举，简直愚蠢！这里利用了浏览器默认字号16px，16*62.5=10px，为何不直接设置为10px呢？但是设置为10px也是不好的，子元素继承了10px的字体大小也是没用的，因为chrome浏览器默认最小字体是12px。当然你有一万种改默认设置的办法，把字体设置到1px大小都可以。看看上文说的阅读体验，你确定要把字体设得那么小，让你的用户都眯成了斗鸡眼？

问题暂时发现就这2个，如果你发现有其他问题，可以发在讨论区，咱们聊聊。

总结就到这里了，听说放点美图可以拉高文字质量呢，都是自拍哦~~