rem和em的区别

最新推荐文章于 2024-07-28 20:57:17 发布
最新推荐文章于 2024-07-28 20:57:17 发布
阅读量3.8k 收藏 9
点赞数 6
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39808181/article/details/114102702
版权

em和rem的主要区别是：浏览器根据谁来转化成px。

当使用rem的时候，他们转化为像素的大小取决于页根元素的字体大小，即html元素的字体大小。

例如：根元素的字体大小为16px，10rem将等于160px，即10*16=160。

当使用em的时候，em转为像素的大小取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小影响，除非显式重写与一个具体单位。

例如，父级元素字体大小为13px,10em将等同于130px,即13x10 = 130px

zc自由飞~
关注
专栏目录
css中px、em和rem的区别总结
01-21
em 和 rem 区别 区别是浏览器根据谁来转化成 px 值 rem 单位如何转化为像素值 当使用 rem 单位，他们转化为像素大小取决于页根元素的字体大小，即 html 元素的字体大小。 根元素字体大小乘以你 rem 值
em和rem的区别
热门推荐
SiReSo的博客
03-14 2万+
1. em 是一个相对单位。相对于当前对象内文本的font-size，如果当前文本的字体尺寸没有设置，则相对于浏览器的默认字体尺寸。即1em=16px 特点： em的值并不是固定的 em会继承父元素的字体大小 2. rem 是一个相对单位。是相对HTML根元素。 特点： rem为元素设定字体大小的时候，是相对于根元素进行计算的。 当我们改变根元素下的字体大小时，下面的大小都会改变。 ...
细说 rem 与 em
p1967914901的博客
02-01 5583
本文我们将介绍CSS中的rem 和 `em，理解这两个单位之间的区别对于想要创建灵活、响应迅速、易于维护和修改的网页的 web 开发人员来说是至关重要的。
前端中rem和em的区别，分别如何使用
最新发布
admire_fish的博客
07-28 336
前端中rem和em的区别，分别如何使用
em和rem的区别，rem适配的原理
WZH15075051915的博客
03-15 1492
rem是CSS3中新增的一个单位，目前移动开发使用也是最广泛的，同样，它也是一个相对单位，不过相对的是HTML根元素，和em不同的是，rem不用时时去关注父级的情况。根据不同屏幕的宽度，以相同的比例动态修改html的font-size适配，并将px替换成rem，它可以很好的根据根元素的字体大小来进行变化，从而达到各种屏幕基本一直的效果体验。rem与em都是相对单位，我们使用它们的目的就是为了适应各种不同的移动端和pc端的屏幕。rem是根据html根节点来计算的，而em是根据父级元素的字体计算的。
CSS中px em rem区别与使用
12-09
在CSS布局和样式设计中，字体大小的设置是非常关键的一部分，通常我们会使用px、em或rem作为单位。这些单位各有特点，适用于不同的场景。下面将详细介绍它们的区别以及使用策略。 首先，px（像素）是最常见的长度...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...
em与rem的区别与使用
qq_36150631的博客
05-29 1万+
一：区别（1）em：em是一种相对长度单位，相对于自身元素的字号大小，如果没有设置即参照父容器的字号大小或浏览器默认字号大小。        举例：如一个div#box的宽度设置为#box{ width:10em }，其字号大小#box{ font-size:14px },则此div的宽度为140px。（2）rem: rem是css3的新标准也是一种相对长度单位，其相对于HTML根标签的字号大小。...
rem和em的区别你知道么？
2302_76765965的博客
08-06 382
我定义了三个盒子，一个父亲盒子parent以及两个子盒子child1和child2，并且父盒子字体大小为20px，宽高为10em，child1的盒子宽高为2em，child2盒子的宽高为2rem。child2子盒子宽高是以rem为单位的，虽然是parent的子盒子，但因为rem是以根因素的字体大小进行计算的，并且根元素的字体大小我设置的是10px，所以child2的宽高为2乘10px为20px。总结：rem是相对于根元素的字体大小计算，而em是相对于父元素的字体大小计算。-- .child2盒子的宽高。
rem、em的区别与使用方式
brian的博客
08-23 4939
本质区别: rem(root element)是参照html的font-size,em(element)是参照父元素的font-size 优点: 以rem/em为单位比px更方便,屏幕尺寸发生变化时只需要更改html/body基数即可,不需要再重新给每个标签写不同的font-size 1.使用rem为单位,系统处理时(将rem转化为px)只会看html的font-size    在使用med...
什么是Redux？它的核心概念有哪些？
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-24 578
引言Redux 核心概念Store（仓库）State（状态）Action（动作）Reducer（规约器）安装与初始化示例代码示例一：定义 Action示例二：编写 Reducer示例三：合并 Reducers示例四：连接 Store 和组件功能使用思路1. 状态管理2. 异步操作3. 模块化和可测试性实际工作中的使用技巧结语return {return {Redux 为复杂的前端应用提供了一套强大而灵活的状态管理方案。
rem 和 em 的区别
yf18040578780的博客
04-28 3989
em和em都是相对单位，主要参考的标签不同：
rem和em的区别。以及如何使用。
meteorites的博客
08-14 1944
两者区别               em会继承父级元素的字体大小。              em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。               使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素   rem单位的使用        （直接引入下面的js代码就可...
css中em和rem是什么，有什么区别？
HXR1984的博客
04-16 4320
文章目录前言一、em是什么？二、rem是什么？三、em和rem的区别 前言 在我们学习css的时候会遇到三种常见的长度单位：px、em、rem。px是像素，相信大家并不陌生，那em和rem又是什么，如何来区别呢？以下内容仅供参考，不作为专业讲解。 一、em是什么？ em是相对长度单位，其值并不固定，一般会继承父级元素的字体大小。任意浏览器的默认字体高都是16px，所有未经调整的浏览器都符合： 1em=16px。但如果父级设置了其他字体高度，那此时的1em就等于父级设置好的字体高度。 二、rem是什么？
rem em的区别 基于什么
06-08
`rem` 和 `em` 都是相对长度单位，但它们的基准不同。 - `rem` 的基准是相对于根元素（即 `html` 元素）的字体大小。例如，如果根元素的字体大小为 `16px`，则 `1rem` 就等于 `16px`。因此，`rem` 可以根据根元素的字体大小进行相对调整，适用于响应式布局等场景。 - `em` 的基准是相对于父元素的字体大小。例如，如果父元素的字体大小为 `16px`，则 `1em` 就等于 `16px`。因此，`em` 可以根据父元素的字体大小进行相对调整，适用于一些特定尺寸和排版场景。 综上所述，`rem` 和 `em` 的区别在于它们的基准不同，一个是根元素，一个是父元素。在实际开发中，应根据具体情况选择合适的相对长度单位。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值