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

本文详细解析了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);

js文件下载地址:
http://download.youkuaiyun.com/detail/monster_g/9738647

<think>好的,我现在需要回答用户关于CSSremem单位换算的问题。用户已经提供了四个引用内容,我需要仔细阅读这些内容,理解它们之关系,然后整理出一个清晰的回答。 首先,我需要明确remem的定义。根据引用[3],emrem都是相对单位,但em是基于父元素的字体大小,而rem是基于根元素(即html元素)的字体大小。引用[4]提到,rem是root em,所以1rem等于根元素的字体大小,通常是html的font-size。而em则是相对于当前元素的font-size,如果当前元素没有设置,则继承父元素,直到根元素。 接下来,换算方法。引用[1]和[2]都指出,默认情况下浏览器字体大小是16px,所以1em=16px。但如果在body中设置font-size为62.5%,那么根元素的字体大小变为10px(16px的62.5%),这样1em=10px,方便计算。例如,12px=1.2em,10px=1em。对于rem来说,引用[4]提到,通常设置根元素font-size为100px的话,1rem=100px,但实际中可能更多使用62.5%的方法来让1rem=10px,这样计算更简便。 需要注意的差异点:em会受到父元素字体大小的影响,而rem始终基于根元素。例如,如果一个元素的父元素font-size是20px,那么1em=20px,而1rem仍然是根元素的10px(如果设置的是62.5%的话)。所以使用em时需要考虑层级关系,而rem更稳定。 用户可能需要示例来说明换算。比如,当根元素是16px时,1rem=16px;如果根元素设置为62.5%,即10px,则1rem=10px。同时,em在父元素不同时的变化情况需要举例说明。 最后,要总结两者的区别和适用场景,比如rem适合全局统一尺寸,em适合相对父元素调整的情况。同时提醒用户注意浏览器默认值以及设置根元素的影响。</think>### CSSremem转换关系及计算方式 #### 1. **基本定义** - **em**:相对单位,基于当前元素或父元素的字体大小。例如,若父元素字体为$16px$,则$1em = 16px$。若父元素未显式设置字体大小,则向上继承直至根元素[^3][^2]。 - **rem**:相对单位,基于根元素(`html`标签)的字体大小。无论嵌套层级如何,$1rem$始终等于根元素的字体大小[^4][^3]。 #### 2. **默认换算关系** - 浏览器默认根元素字体大小为$16px$,因此: $$1em = 16px \quad (默认情况下)$$ $$1rem = 16px \quad (默认情况下)$$ 例如:$0.75em = 12px$,$1.25rem = 20px$[^1][^2]。 #### 3. **简化换算的常用方法** 为方便计算,开发者通常通过重置根元素字体大小来简化单位转换: - **步骤1**:设置根元素字体大小为$62.5\%$(即默认$16px$的$62.5\%$): ```css html { font-size: 62.5%; } /* 此时1rem = 10px */ ``` 此时: $$1rem = 10px$$ 例如:$1.2rem = 12px$,$2.4rem = 24px$[^4]。 - **步骤2**:若父元素字体大小被修改,`em`的基准会变化。例如: ```css .parent { font-size: 20px; } .child { width: 2em; } /* 此时2em = 40px */ ``` 而`rem`始终不受父元素影响,仅依赖根元素设置[^3][^4]。 #### 4. **关键差异** | 特性 | em | rem | |--------------|-------------------------------------|--------------------------------------| | 基准 | 当前元素或父元素的字体大小 | 根元素(`html`)的字体大小 | | 层级影响 | 受父元素字体大小影响 | 不受嵌套层级影响 | | 适用场景 | 局部相对布局(如按钮内距) | 全局统一布局(如栅格系统、边距) | #### 5. **计算示例** - **默认情况**: $$24px = 24/16 = 1.5em \quad 或 \quad 1.5rem$$ - **重置根字体为$10px$后**: $$24px = 24/10 = 2.4rem$$ 若某父元素字体设为$20px$: $$24px = 24/20 = 1.2em \quad (\text{但} \ 1.2rem = 12px)$$ #### 6. **注意事项** - **浏览器兼容性**:`rem`在CSS3中引入,需兼容旧浏览器时慎用[^4]。 - **响应式设计**:通过媒体查询动态调整根元素字体大小,可实现自适应布局。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值