CSS中“em”，“rem” 简介

最新推荐文章于 2022-04-16 12:01:06 发布
最新推荐文章于 2022-04-16 12:01:06 发布
阅读量543 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u011344924/article/details/84315033
本文详细解释了CSS中em和rem单位的区别与应用。em单位是相对大小，取决于父元素的字体大小；而rem单位则始终相对于根元素(html)的字体大小。这使得rem在复杂的嵌套布局中提供更稳定的尺寸控制。

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

“em”是一个相对大小，可以指定到小数点后三位。

1. 浏览器的默认字体大小是16px; 1em = 16px;

2.当前元素的font-size中em是相对于其父元素font-size的值来计算的。

3.当前元素的其他属性（非font-size）中em是相对于本元素字体大小的值来计算的。

 

由于查看当前元素的font-size的大小时需要查看其父元素的font-size大小，所以当嵌套层级深时计算元素的font-size值时就比较复杂。所以“rem”诞生了。

“rem”是相对于根元素（<html>）来确定其长度。

 

px、em 和 rem 的区别：深入理解 CSS 中的单位
chaosweet的博客
01-14 1439
授人以鱼，不如授人以渔。
rem 小数点问题
try again
12-20 3145
rem 用法根据html的fontsize的改变来改变你使用rem的位置大小！一般情况下这个东西真的好好用啊 ！什么问题好像都能解决，当你遇到 适配问题的时候！特别是一些需要在不同大小的屏幕时候  ，但是真正用到这个东西的时候我们会发现你会有个很尴尬的地方！ 那就是只能在一部屏幕中使用 就是当这个比例达到 你说设定的宽高比例的时候  但是其他时候 也许是宽度不够  也可能是高度不够 ！更尴尬
css 什么是em
黄大仙
08-23 569
1em等于父元素的font-size大小的1倍 案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { font-size: 12px; } p { /*1em等于父元素的font-size*/ width: 10em;
CSS之EM属性
tian361zyc的博客
06-11 1950
CSS
CSS单位——px，em，rem...
u012194956的博客
04-13 382
1. px        # px（像素）是一个虚拟长度单位，是计算机系统的数字化图像长度单位        # 特点：                #1. px是一种绝对单位（absolute units）。其他的绝对单位有：mm（毫米），cm（厘米），in（英寸），pt（点），pc（十二点活字）                #2. IE无法调整使用px作为单位的字体大小（缩放）      ...
Vue rem 适配方案
weixin_45047796的博客
07-31 290
1.此针对web端的适配 1.下载lib-flexible npm i lib-flexible --save 2.在main.js中引入lib-flexible import 'lib-flexible/flexible' 3. 安装px2rem-loader （自动换算rem） npm install px2rem-loader 4.在项目的build\utils.js配置 const px2remLoader = { loader: 'px2rem-loa...
深入理解rem、px、em
Manarola的博客
01-20 1193
任意浏览器的默认字体高都是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
CSS中px em rem区别与使用
12-09
在CSS布局和样式设计中，字体大小的设置是非常关键的一部分，通常我们会使用px、em或rem作为单位。这些单位各有特点，适用于不同的场景。下面将详细介绍它们的区别以及使用策略。 首先，px（像素）是最常见的长度...
了解和使用CSS中的rem单位
01-08
CSS中的`rem`（root em）单位是一种相对长度单位，用于表示元素的尺寸相对于文档根元素（通常是`<html>`）的字体大小。这个单位在Web设计中被广泛使用，因为它提供了一种更加灵活和一致的方式来控制页面布局，特别是...
postcss-pxtorem:使用PostCSS将像素单位转换为rem（根em）单位
04-06
postcss-pxtorem 的插件，可从像素单位生成rem单位。 安装 $ npm install postcss postcss-pxtorem --save-dev 用法 像素是最容易使用的单位（观点）。 它们的唯一问题是它们不允许浏览器将默认字体大小更改为16。...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
3. **rem**: CSS3引入的rem单位，其含义是"root em"，即相对于HTML根元素的字体大小。这允许开发者通过改变根元素的字体大小来统一调整整个页面的字体尺寸，而不会产生em单位那样的连锁反应。对于实现全局的响应式...
css 保留两位小数,css – 在样式表规则中解释小数点后的位数？
weixin_36282765的博客
08-03 1672
所以最近我偶然发现了this answer’s CSS：larger {width: 66.66666666%;}smaller {width: 33.333333333%;}这让我想到：使用样式表的浏览器真正解释了多少位数？因为在Chrome中使用4位数时我没有看到差异.CSS：body,div {width: 100%;min-height:2em;margin:0px;padding:0px...
rem 产生的小数像素问题---修复响应式开发
Tomihao
11-11 4015
rem 产生的小数像素问题 作者: 颂晨 发表于: 2015-11-04 由于日常需求以无线居多，所以可以在业务中做一些尝试，如 rem，刚接触这个特性的时候，曾经一度爱不释手，仿佛在无线开发的坎坷路上寻找到一条捷径。然而随着使用范围的扩大，慢慢的发现了一些使用 rem 带来的问题。 rem 关于 rem 这个单位的介绍，在此就不赘述，有兴趣的同学可以阅读一丝的
rem px转换小数点问题
luqingxuan
12-22 1341
  https://www.zhihu.com/question/264372456/answer/280496269
css常用单位px、em、 rem 区别与各自的用法解析
前端岚枫
03-21 1691
我们在布局页面中，总要用到一些有关字体，元素宽度，高度等长度单位，一般pc端常用到像素单位，移动端用em，rem 单位，它们都有各自的特点，今天总结一下它们的特点、区别 px是Pixel的缩写，也就是说像素是指基本原色素及其灰度的基本编码，由 Picture(图像) 和 Element（元素）这两个单词的字母所组成的，如同摄影的相片一样，数码影像也具有连续性的浓淡阶调。 px是固定大小的单位,像素...
html的em属性,css中的em是什么意思？
weixin_35157304的博客
06-04 5666
em是CSS中的一个相对单位，它的单位长度是根据元素的文本垂直长度来决定的。可以作用在width、height、line-height、margin、padding、border等样式的设置上。css中em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。在响应式和移动端设计的大前提下，使用em能够更方便快捷的一次性调整web文档...
css中em和rem是什么，有什么区别？
HXR1984的博客
04-16 6105
文章目录前言一、em是什么？二、rem是什么？三、em和rem的区别 前言 在我们学习css的时候会遇到三种常见的长度单位：px、em、rem。px是像素，相信大家并不陌生，那em和rem又是什么，如何来区别呢？以下内容仅供参考，不作为专业讲解。 一、em是什么？ em是相对长度单位，其值并不固定，一般会继承父级元素的字体大小。任意浏览器的默认字体高都是16px，所有未经调整的浏览器都符合： 1em=16px。但如果父级设置了其他字体高度，那此时的1em就等于父级设置好的字体高度。 二、rem是什么？
CSS相对单位em
热门推荐
要和代码过一辈子的博客
08-20 1万+
在web环境下，用户可以将浏览器窗口设置为任意大小，且CSS需要去适应它。 响应式 —— 在CSS中，这指的针对不同大小的浏览器窗口，用不同的方式响应更新页面的样式。我们要对不同尺寸的手机、平板电脑或桌面显示器多花心思了。 CSS支持一些绝对长度单位，其中最常见也最基本的是像素（px）。较不常见的绝对单位有毫米（mm，millimeter）、厘米（cm，centimeter）、英寸（in.，i...
CSS中强大的EM（转）
萌萌的It人 www.itmmd.com
05-24 4005
使用CSS也好久了，但一直都是在使用“px”来设置Web元素的相关属性，未敢使用“em”。主要原因是，对其并不什么了解，只知道一点概念性的东西，前段时间在项目中要求使用“em”作为单位设置元素，所以从头对“em”学习了一回。稍为有一点理解，今天特意整理了一份博文与大家一起分享，希望对童子们有些许的帮助。 这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局，从而学习其如何计算？又是如何使用
CSS中em与rem的区别
最新发布
06-05
<think>嗯，用户想了解CSS中em和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等旧浏览器，可能要用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、付费专栏及课程。

余额充值