你的位置:首页 > 软件开发 > 网页设计 > 用rem实现WebApp自适应的优劣分析

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

发布时间:2016-04-13 18:00:09
关于rem实现屏幕自适应布局的讨论还是比较多的,刚好我也看到使用rem实现自适应的web app,所以也来凑下热闹。说起rem,免不了要联系到em、px,这里简单提提他们的定义和特点。1. px:像素(Pixel),相对长度单位。像素px是相对于显示器屏幕分辨率而言的,手机上的1 ...

关于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代码的,这样的问题博主都没兴趣回答了,我贴一份吧。

用rem实现WebApp自适应的优劣分析用rem实现WebApp自适应的优劣分析
 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实现WebApp自适应的优劣分析

关键词:web

web
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。