关于rem的学习

时间：2021-06-24 07:56:45

网页常见单位px、em、rem；其中rem是css3新出的单位，官网是这样定义的：“font size of the root element”，意思是：相对长度单位，相对于根元素（即html元素）font-size计算值的倍数。

网上搜索了一些关于px和rem有何区别的文章，大部分都是说rem在针对用户使用浏览器缩放的时候有较好的体验，而px会在浏览器缩放的时候破坏我们网页原有的布局。但是经过我自己的试验，发现并没有这个问题；也就是说如果只是针对浏览器缩放来说，用px和rem是没有什么区别的；

后来在这里看到了这样的一段文字  >>链接地址：http://ons.me/490.html   注：此段转载自西门的后花园

bug 1：例如reset里并没有设置网站文字字号，所以我会在body里直接写font-size:1.2rem，让整个网页字号为12px。但在Android的Chrome里无效，还是按照16px来计算而不是我手动设置10px计算。所以要想给整个网页设置默认字号，最粗暴的办法就是直接在body里设置em或者px字号，例如body{font-size:1.2em}或者12px，推荐em。body直接继承html的字号，可以间接实现rem的功能。然后其他地方用rem是没问题的。

bug 2：因为Chrome设置了最小字号为12px，导致如果在宽高、行高、边距等地方用rem，虽然在html那设置了10px，但默认还是会按照12px来计算，所以实际会偏大。建议rem只是在字号上用比较好。

到此，总算是弄明白了rem和px的不同之处

js动态计算rem值

/**

 * [以iPhone6的设计稿为例js动态设置文档 rem 值]

 * @param  {[type]} doc [文档元素]

 * @param  {[type]} win [window]

 * @return {[type]}     [description]

 */

(function(doc, win) {

    var docEl = doc.documentElement;

    var resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';

    var remcalc = function() {

        var clientWidth = docEl.clientWidth;

        var fontValue;

        if (!clientWidth) return;

        fontValue = ((62.5 * currClientWidth) / 375).toFixed(2);

        fontValue = fontValue > 106.67 ? 106.67 : fontValue;

        window.baseFontSize = fontValue;

        docEl.style.fontSize = baseFontSize + 'px';

    };

    if (!docEl.addEventListener) return;

    win.addEventListener(resizeEven, remcalc, false);

    doc.addEventListener('DOMContentLoaded', remcalc, false);

})(document, window);

相关文章