CSS中px、em和rem的区别

最新推荐文章于 2021-11-18 10:56:09 发布

转载最新推荐文章于 2021-11-18 10:56:09 发布 · 89 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaoan0705/p/8630647.html

在css中单位长度用的最多的是px、em、rem，这三个的区别是：

　　px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

　　em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。

　　对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。

　　rem中的r意思是root（根源），这也就不难理解了。

em会继承父元素的字体大小，比如：
body{font-size: 16px;}
p{font-size:0.75em;}
span{font-size:2em;}

<html>
我大小为16px;
<p>
段落文字大小为12px(16*0.75);
<span>
我大小是2em，即24px，这里是相对父级字号*2的，而不是相对body里面的16px
</span>
</p>
</html>

Rem(浏览器支持还不是很理想)，他只相对html或body的字体尺寸(默认还是16px，除非你自己用font-size定义为其他)，没有了继承父级尺寸这个关系。

rem是根据根元素html的font-size大小来变化的。所以我们可以根据不同设备的宽度来设置对应的html的字体大小，从而实现自适应布局。

如何根据不同设备的宽度来设置html的字体？

在做页面时将设计稿的宽度缩放至640px,将1rem设为设计稿中的100px,因此屏幕的宽度为（640%100）=6.4rem

(function(win) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var tid;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (width > 540) { // 最大宽度
            width = 540;
        }
        var rem = width / 6.4; 
        docEl.style.fontSize = rem + 'px';
    }

    win.addEventListener('resize', function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    refreshRem();

})(window);

转载于:https://www.cnblogs.com/xiaoan0705/p/8630647.html