em与rem的区别与使用

一:区别

(1)em:em是一种相对长度单位,相对于自身元素的字号大小,如果没有设置即参照父容器的字号大小或浏览器默认字号大小。

        举例:如一个div#box的宽度设置为#box{ width:10em },其字号大小#box{ font-size:14px },则此div的宽度为140px。

(2)rem: rem是css3的新标准也是一种相对长度单位,其相对于HTML根标签的字号大小。

        举例: 如有css: html{ font-size:14px},此根标签内有元素div#box的宽度为:#box{ width:10rem },则此div的宽度            换算成像素则为140px。

二:rem 的使用:

        使用场景:一般移动端的UI设计稿的宽度分为640px,和750px两种,但是要想使用一份代码就适配所有屏幕,就必须使用相对单位,这时候使用rem是最好的选择。

        使用方法:我们将UI设计稿人为均分成几等份,使用媒体查询判断屏幕的大小,针对判断出的每一种屏幕大小,给其html根元素的字号大小设置为为均分后的每一等份的大小。如:

        UI设计稿宽度为640px,我们将UI设计稿均分为20等份,那么我们就可以通过媒体查询,给320px的屏幕设置HTML根元素的字号大小为16px(320/20),给640px大小的屏幕设置html根元素字号大小为32px(640/20),则我们在后续书写代码的时候,ui设计稿上的一个div的盒子宽度为160px,我们使用rem单位将其表示为width:5rem,则此盒子无论在320px的屏幕下还是在640px的屏幕下都将显示为屏幕的四1/4的宽度。

三:简便方法:

        我们在使用rem时,每一个元素的大小都将从设计稿的px转换为rem相对单位,非常麻烦。遇到不能整除的数值还会导致最后页面数值的不精确,在这种情况下我们,可以使用淘宝开发的flexible.js插件,配合开发工具vs code的cssrem插件,可避免做媒体查询与数值的转换。(前者避免媒体查询,后者避免做数值转换)。

<think>嗯,用户想了解CSSemrem单位的区别,我之前已经总结过相关知识,但需要再理清关键差异点。根据引用内容,核心区别在于参照基准不同:em依赖父元素字体大小,rem则固定参照根元素(html)的字体大小。用户可能正在学习响应式设计,因为emrem都是相对单位,在适配不同屏幕时特别重要。ta特意区分这两者,可能是遇到了嵌套元素尺寸混乱的问题。从引用的代码片段来看[^4],em在多层嵌套时确实会出现复合效应——子元素的em值会基于父元素的字体大小计算,导致逐级放大或缩小的问题。而rem始终基于根元素[^3],这种设计能避免层级干扰,更利于整体控制。用户没有提到具体应用场景,但移动端开发常用rem这个点值得强调[^1]。引用中示例代码很直观[^2],当设置html的font-size:14px时,10rem直接换算成140px,这种可预测性比em更可靠。不过em在组件内部样式隔离时仍有优势,比如希望按钮内间距随按钮字体大小等比例变化。需要提醒用户注意浏览器兼容性,虽然现在主流浏览器都支持rem,但若需兼容IE8等旧浏览器,可能要用px或em替代。另外字体单位用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、付费专栏及课程。

余额充值