CSS3中的rem,em与px间的换算关系

最新推荐文章于 2025-06-29 18:11:31 发布

原创最新推荐文章于 2025-06-29 18:11:31 发布 · 5.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css3

css 专栏收录该内容

1 篇文章

订阅专栏

本文详细解析了px、em和rem三种单位的区别及其应用场景。px是固定长度单位，em是相对于当前对象内文本的字体尺寸，rem则是相对于HTML根元素的字体大小。通过实例说明了如何使用这些单位实现响应式设计。

px,em,rem之间有什么区别？

国内的设计大师都喜欢用px,而国外的网站大都喜欢用em和rem，那三者之间有什么区别？又各自有什么优劣呢？

px

Pixel像素，相对长度单位。像素是相对于显示器分辨率而言。

em

相对长度单位，相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被设置，则相对于浏览器的默认字体尺寸。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合：1em= 16px。有时为简化font-size的换算，需要在css中的body选择器中声明font-size=62.5%,此时1em=16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说换算时只需将原有px数值除以10，然后换上em作为单位即可。
特点：
1 em 的值并不是固定的。
2 em的值会继承父级元素的字体大小。

<html>
    <div>
        <p> 你猜我字体是多大？</p>
    </div>
</html>
/******css样式*********/
html{
    font-size:62.5% // font-size:10px 1em:10px
}
div{
    font-size:1.2em //font-size: 10 *1.2 =12px
}
p{
    font-size:1.2em //font-size= 12*1.2=14.4px
}

rem

rem是CSS3新增的一个相对单位（root em，根em），这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，虽然仍是相对大小，但相对的只是HTML根元素。通过rem，既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
目前除IE8及更早版本外，所有浏览器均已支持rem。对于不支持的浏览器，可以多写一个绝对单位的声明。如此浏览器会忽略rem设定的字体大小。

p{
    font-size:14px;
    font-size:2rem;
}

注意：
1 若没有在根元素（html字体）指定参照值，那浏览器默认1 rem就是16px,若指定值，则1rem就是指定值
2 html设置为62.5%或者10px时会失效，是因为小于12px或者75%的字体大小不支持换算。这可能与有些浏览器不支持12px以下的大小有关。所以，使用rem单位，html的字体默认字体大小必须设置为12px或以上。若小于12px则浏览器换算时自动默认字体为12px。

px,em,rem转换进阶版

px，em,rem 在线转换工具：地址：http://pxtoem.com/

移动端适配时，大量的数据转换非常耗时。对于数学不是很好的娃来讲，恩，好讨厌。算完一遍之后还要核查一遍。更讨厌了。

懒人推动世界进步。前方高能。使用该js，无需meta viewport 进行移动端各个界面的编写。

//author:caibaojian
//website:http://caibaojian.com
//weibo:http:weibo.com/kujian
//兼容UC竖屏转横屏出现的BUG
//自定义设计稿的宽度：designWidth
//最大宽度:maxWidth
;(function(designWidth, maxWidth) {
    var doc = document,
        win = window;
    var docEl = doc.documentElement;
    var tid;
    var rootItem,rootStyle;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (!maxWidth) {
            maxWidth = 540;
        };
        if (width > maxWidth) {
            width = maxWidth;
        }
        var rem = width * 100 / designWidth;
        rootStyle="html{font-size:"+rem+'px !important}';
        rootItem = document.getElementById('rootsize') || document.createElement("style");
        if(!document.getElementById('rootsize')){
        document.getElementsByTagName("head")[0].appendChild(rootItem);
        rootItem.id='rootsize';
        }
        if(rootItem.styleSheet){
        rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)
        }else{
        try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}
        }
        docEl.style.fontSize = rem + "px";
    };
    refreshRem();

    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);

    if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";
    } else {
        doc.addEventListener("DOMContentLoaded", function(e) {
            doc.body.style.fontSize = "16px";
        }, false);
    }
})(750, 750);