css中em与px的介绍及换算方法

本文解析了EM单位的概念及其在网页布局中的应用技巧。介绍了如何通过设置BODY的字体大小为62.5%来简化EM值的计算,并讨论了EM单位相对于PX单位的优势与使用时需要注意的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

em是何物?
em指字体高,任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font -size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
em有如下特点:
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。

重写步骤:
1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
简单吧,如果只需要以上两步就能解决问题的话,可能就没人用px了。经过以上两步,你会发现你的网站字体大得出乎想象。因为em的值不固定,又会继承父级元素的大小,你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em,但如果p属于content的子级的话,p的字体大小就不是12px,而是1.2em= 1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em,这个em值继承其父级元素body的大小,也就是16px * 62.5% * 1.2=12px, 而p作为其子级,em则继承content的字体高,也就是12px。所以p的1.2em就不再是12px,而是14.4px。
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明,也就是避免以上提到的1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
<think>嗯,用户想了解CSSem和rem单位的区别,我之前已经总结过相关知识,但需要再理清关键差异点。根据引用内容,核心区别在于参照基准不同:em依赖父元素字体大小,rem则固定参照根元素(html)的字体大小。用户可能正在学习响应式设计,因为em和rem都是相对单位,在适配不同屏幕时特别重要。ta特意区分这两者,可能是遇到了嵌套元素尺寸混乱的问题。从引用的代码片段来看[^4],em在多层嵌套时确实会出现复合效应——子元素的em值会基于父元素的字体大小计算,导致逐级放大或缩小的问题。而rem始终基于根元素[^3],这种设计能避免层级干扰,更利于整体控制。用户没有提到具体应用场景,但移动端开发常用rem这个点值得强调[^1]。引用中示例代码很直观[^2],当设置html的font-size:14px时,10rem直接换算140px,这种可预测性比em更可靠。不过em在组件内部样式隔离时仍有优势,比如希望按钮内间距随按钮字体大小等比例变化。需要提醒用户注意浏览器兼容性,虽然现在主流浏览器都支持rem,但若需兼容IE8等旧浏览器,可能要用pxem替代。另外字体单位用rem时,为方便计算,许多开发者会设置根字体为62.5%(约10px),这样1rem=10px便于换算。最终要回归使用场景给出建议:全局布局建议rem,组件内局部适配可用em。这样用户能根据实际需求选择。代码差异演示也很重要,尤其是多层嵌套时的效果对比[^4],能直观说明问题。</think> 在CSS中,`em`和`rem`都是相对长度单位,但**参照基准不同**,这导致它们的计算逻辑和应用场景有明显差异: --- ### 一、核心区别(参照基准) 1. **`em` 单位** - **参照基准**:当前元素**父级**的字体大小(`font-size`)。 - **特性**:具有层级继承性,子元素的`1em`值会随父元素字体大小变化。 - **示例**(引用自[^4]): ```css div { font-size: 40px; /* 父元素 */ width: 10em; /* 10 × 40px = 400px */ } p { font-size: 0.5em; /* 0.5 × 40px = 20px (继承div) */ width: 10em; /* 10 × 20px = 200px (参照自身的font-size) */ } ``` 多层嵌套时尺寸会逐级叠加计算(连锁反应)❗️ 2. **`rem` 单位**(root em) - **参照基准**:**根元素**(`<html>`)的字体大小(`font-size`)[^1][^2][^3]。 - **特性**:层级无关,所有元素的`1rem`值始终等于根元素的字体大小。 - **示例**(引用自[^2]): ```css html { font-size: 14px; /* 根元素基准 */ } #box { width: 10rem; /* 10 × 14px = 140px */ } ``` 修改根元素字体尺寸会全局影响所有`rem`单位✅ --- ### 二、关键差异总结 | **特性** | `em` | `rem` | |------------------|-----------------------------------|-----------------------------------| | 参照对象 | 父元素的字体大小 | 根元素(`<html>`)的字体大小 | | 层级影响 | 是(逐级复合) | 否(直接依赖根元素) | | 响应式调整 | 需修改各级父元素 | **仅修改根元素即可全局生效** | | 代码可维护性 | 复杂嵌套时易混乱 | 更简单、可预测 | | 典型应用场景 | 组件内部相对缩放(如按钮内间距) | **全局布局(间距、宽高、字体)** | --- ### 三、何时选择? - **推荐 `rem`**:用于整体布局(容器宽度、内外边距)、字体大小等**全局比例控制**,尤其适合响应式设计(通过媒体查询调整根元素字号即可)[^1][^3]。 - **谨慎用 `em`**:用于**组件内部细节**(如按钮内边距基于自身字体大小),需注意继承链影响[^4]。 > 总结:`rem` 因其根元素的直接绑定,规避了层级依赖问题,已成为移动端和响应式设计的首选单位[^1][^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值