用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代码的,这样的问题博主都没兴趣回答了,我贴一份吧。
1 <script> 2 (function (doc, win) { 3 var docEl = doc.documentElement, 4 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 5 recalc = function () { 6 var clientWidth = docEl.clientWidth; 7 if (!clientWidth) return; 8 docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; 9 }; 10 11 if (!doc.addEventListener) return; 12 win.addEventListener(resizeEvt, recalc, false); 13 doc.addEventListener('DOMContentLoaded', recalc, false); 14 })(document, window); 15 </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个,如果你发现有其他问题,可以发在讨论区,咱们聊聊。
总结就到这里了,听说放点美图可以拉高文字质量呢,都是自拍哦~~