你的位置:首页 > 网页设计

[网页设计]用rem实现自适应的优劣分析


关于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计算。但是,我们使用rem不就主要在移动端使用吗?在pc端其实rem其实并不是很适合,大家看PC网站也发现大屏幕和小屏幕并不是比例缩放的,如果是比例缩放的话大屏的体验是相当差的。提问区里面还有人问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>

View Code

rem的优势                                                                                

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

rem的劣势                                                                                           

其实rem的优势也正是他的缺点,rem的屏幕自适应与当前两大平台的设计哲学不一致!从用户体验上来看,舒适的阅读体验跟媒体介质大小是没关系的。简单的来说,在文字阅读上可能你比较喜欢的大小是花生米一样大的,在A4纸上你看得很爽,按照rem的缩放原则在A3纸上呈现的是红烧肉那么大的字号,你喜欢吗?在A3A4A5上你都是专一的喜欢花生米,跟大小关系不大。字体根据媒介缩放是因为屏幕太小的时候,为了呈现更多的内容,因为频繁翻页的用户体验也是很差的。另外,图片视频的尺寸不应该随意缩放,如果图片视频的宽高都用rem关联起来, 这样虽然是等比缩放了,但是小屏到大屏的放大可能会让像素不高的图片变模糊,这样还不如小尺寸看着顺眼。

关于优劣势的讨论可以看知乎上的讨论,我也引用了大神们的观点,标明一下出处哈。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大小都可以。看看上文说的阅读体验,你确定要把字体设得那么小,让你的用户都眯成了斗鸡眼?

 

总结就到这里了,听说放点美图可以掩盖文字质量不高的问题呢。

秋日荒川