CSS3长度单位REM使用有感

近期项目做手机页面,前台html全部外包出去,拿到页面后发现页面中的所有长度单位全部使用rem,第一次接触rem是在查看淘宝首页代码的时候,网上查了一下知道rem是基于根元素的字体大小的单位,没有深究,一直觉得用处不大。直到近期真正做起项目,才真正感受到了rem之美。

rem介绍

REM(Font size of the root element)是指相对于根元素的字体大小的单位。和em单位不同,em的长度是相对于父级元素font-size的,而rem是相对于根元素的。

rem的优点

相对于流布局响应式布局等适配方式,REM 适配更为灵活,在不同屏幕尺寸上根据根节点来等比适配

兼容性好(Android 2.1+ / iOS 4.1+)

rem的使用

之前做手机端的页面,为了适配所有的手机分辨率,采用了全部百分比宽度的解决方案,这样实现起来没问题,但是控制死板,且控制难度较大,经常导致不同分辨率下页面缩放比例不一致。rem不一样,rem是基于跟元素font-size进行缩放的,这个特性很重要,换了分辨率之后简单粗暴的放大font-size就可以了。

下图展示了假定按照640作为标准尺寸时,font-size、px和rem的情况

1418903956

由上图可知,元素的真正展示宽度和font-size是等比缩放的,举例说明即640宽度和480宽度下,1rem的真正宽度比例为20/15,而这个宽度比也正是屏幕的宽度比640/480。通过这个特性,前端程序可以通过js来改变不同分辨率下的font-size,进而实现不同分辨率下同比例缩放,暴力适配所有分辨率。

可以参考如下代码:

(function(doc, win) {
    var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 
    recalc = function() {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        if (clientWidth >= 750) {
            clientWidth = 750;
        }
        docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
    };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

标签:

分享:

1条评论

发表评论

邮箱地址不会被公开。 必填项已用*标注

😉😐😡😈🙂😯🙁🙄😛😳😮:mrgreen:😆💡😀👿😥😎😕

验证码 *