[css] 第10天对比下px、em、rem有什么不同？ #29

haizhilin2013 · 2019-04-25T21:03:14Z

第10天对比下px、em、rem有什么不同？

tiyunchen · 2019-06-01T08:03:17Z

默认情况下: 1em = 10px; 1rem = 16px

AricZhu · 2019-06-19T01:29:07Z

px是css中的逻辑像素，和移动端的物理像素之间会有一个比值dpr
em是指相对于父元素的大小
rem中的r就是root，也就是相对于root元素的大小（html标签）

chenliwen123 · 2019-07-09T01:29:27Z

px 是固定的值 em 是相对父级变换大小 rem 是相对html,body大小变换的

Vi-jay · 2019-07-25T08:57:46Z

1em = 当前元素的字体大小，1rem = 当前html元素的字体大小

Konata9 · 2019-07-25T15:12:17Z

px: 绝对固定的值，无论页面放大或者缩小都不会改变。
em: 相对父元素字体大小的倍数。如果父元素的字体为 12px，那么子元素 1em 就是 24px。由于是相对父级的倍数，所以多层嵌套时，倍数关系的计算会很头痛。
rem: 相对根元素字体大小的倍数。相对于 html 的字体大小，如果不做任何修改，浏览器默认字体大小为 16px。

小技巧

如果为了方便计算 rem，可以设置 font-size= 62.5% 这样一来默认的字体就变成 10px 了。之后的 rem 就是以 10 为基准了。

xcLtw · 2019-09-02T03:03:56Z

em和rem属于与font-size有关的长度单位，大小不固定，个人体验在多设备上优于px但不如视图系列单位
px属于绝对长度单位，类似的还有cm,mm 。在不同设备上表现的宽度可能不一致，但相对长度固定
vw,vh 属于与视图大小有关的长度单位，vw为当前视图宽度的 1%.vh为当前视图高度的 1%

GuYueJiaJie · 2019-09-14T12:46:38Z

那么多回答em是相对父元素大小的麻烦你们严谨一点好吗。。

LeiDeMing · 2019-09-19T02:28:05Z

em是相对自身标签的font-size大小，哪是什么相对父元素咯

Daniel-Fang · 2019-09-20T09:57:55Z

px: 绝对固定的值，无论页面放大或者缩小都不会改变。

em: 相对父元素字体大小的倍数。如果父元素的字体为 12px，那么子元素 1em 就是 24px。由于是相对父级的倍数，所以多层嵌套时，倍数关系的计算会很头痛。

rem: 相对根元素字体大小的倍数。相对于 html 的字体大小，如果不做任何修改，浏览器默认字体大小为 16px。

小技巧

如果为了方便计算 rem，可以设置 font-size= 62.5% 这样一来默认的字体就变成 10px 了。之后的 rem 就是以 10 为基准了。

如果父元素font-size: 12px; 子元素设置 font-size: 1em; 则为12px; 不是24px;

thonyl19 · 2019-10-06T15:01:30Z

關於 em 的問題,可以參考
https://www.w3schools.com/css/css_units.asp
Relative to the font-size of the element (2em means 2 times the size of the current font)
相對於父級元素的字體大小(2em表示當前字體大小的2倍)
可以實際用這個案例試玩一下可以更清楚
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_em

censek · 2019-10-11T02:13:22Z

https://www.runoob.com/w3cnote/px-em-rem-different.html

PX

像素，相对长度单位，px 是相对显示器屏幕分辨率而言的。

EM

相对长度单位，em 相对于当前对象内文本的字体尺寸。通常 1em = 16px。

REM

root em，CSS3 新增的一个相对单位。
使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用 px 即可。
对于需要适配各种移动设备，使用 rem。

hayahayao · 2019-10-28T09:19:33Z

关于em，存在两种情况：

用于font-size属性时，是该元素继承的font-size缩放因子，也就是相对于父元素的font-size大小；
用于计算盒模型大小时，不是基于继承的font-size，而是基于元素自身计算的font-size

abueavan · 2019-11-01T13:03:53Z

px 定长，放大缩小不改变，不同设备dpr( 物理像素 / 独立像素)不同，低分辨率屏幕dpr=1，高分辨率屏幕>1
em相对大小，当前字体的倍数
rem相对大小，类似于em，根元素html字体大小的倍数

wsylws · 2019-11-08T03:24:48Z

px：在缩放页面时无法调整那些使用它作为单位的字体、按钮等的大小；
em：相对单位，会继承父级元素的字体大小，代表倍数。
rem：相对单位，始终是基于根元素HTML的，代表倍数。

hexuerong · 2019-12-02T03:53:27Z

px 像素，相对长度单位。像素px是相对于显示器屏幕分辨率而言的。。(引自CSS2.0手册)
em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。。(引自CSS2.0手册)
任意浏览器的默认字体高都是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会继承父级元素的字体大小；
3. 要重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
  也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
rem 是CSS3新增的一个相对单位（root em，根em）。但相对的只是HTML根元素。
这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

p {font-size:14px; font-size:.875rem;}

yyz841875845 · 2019-12-23T02:51:36Z

px、em、rem都是计量单位，都能表示尺寸，但是有有所不同，而且其各有各的优缺点。

Px表示“绝对尺寸”（并非真正的绝对），实际上就是css中定义的像素（此像素与设备的物理像素有一定的区别，后续详细说明见文末说明1），利用px设置字体大小及元素宽高等比较稳定和精确。Px的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。

em表示相对尺寸，其相对于当前对象内文本的font-size（如果当前对象内文本的font-size计量单位也是em，则当前对象内文本的font-size的参考对象为父元素文本font-size）。使用em可以较好的相应设备屏幕尺寸的变化，但是在进行元素设置时都需要知道父元素文本的font-size及当前对象内文本的font-size，如有遗漏可能会导致错误。

rem也表示相对尺寸，其参考对象为根元素的font-size，因此只需要确定这一个font-size。
所以推荐使用px 或rem， em 容易出错

zlqGitHub · 2019-12-27T03:23:27Z

首先他们都是长度大小单位，但有所不同：

px是像素单位，指定多少就是多少，方便于计算；
em的值是不固定的，相对于父级元素，并且会继承父级元素的字体大小。默认浏览器的字体大小为16px，不对浏览器做处理时，1em = 16px; 那么 12px = 0.75em；
rem相对于根元素的html字体大小，规格屏幕的宽度是20rem；那么 1rem = (750/20)rpx;

huangd-d · 2020-03-18T07:09:51Z

em是相对自身标签的font-size大小，哪是什么相对父元素咯

特看了下 w3c 上面。为什么都说是父元素。。。也不知道谁先提出来的！坑啊

qiqingfu · 2020-04-04T08:18:05Z

px: 1px也就是1像素, 对于普通的屏幕, 通常就是一个设备像素点
em: 相对长度单位，这个单位表示元素的 font-size 的计算值。如果用在 font-size 属性本身，它则表示元素继承的 font-size 值
rem: 代表根元素的 font-size 大小(<html>元素的font-size)。当用在根元素的 font-size 上面时，它代表了它的初始值

blueRoach · 2020-05-26T07:59:34Z

px：像素点的宽度
em：该元素字体像素大小 * 希望得到的多少倍
rem：根元素字体像素大小 * 希望得到的多少倍

giggleCYT · 2020-06-03T06:39:35Z

1、px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

2、em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。

3、em是相对于其父元素来设置字体大小的，一般都是以的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值。

对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。

Fengzhen8023 · 2020-06-30T03:00:02Z

@GuYueJiaJie

那么多回答em是相对父元素大小的麻烦你们严谨一点好吗。。

@LeiDeMing

em是相对自身标签的font-size大小，哪是什么相对父元素咯

em是相对自身标签的font-size大小，但是该属性是可以从父元素继承的。
所以很多人误认为em是相对于父元素标签中的font-size大小。

xiaoyucoding · 2020-07-16T02:31:28Z

关于em，存在两种情况：

用于font-size属性时，是该元素继承的font-size缩放因子，也就是相对于父元素的font-size大小；

用于计算盒模型大小时，不是基于继承的font-size，而是基于元素自身计算的font-size

用以下实际代码来测试一下

<div class="box1">
    <p class="text1">Text1</p>
</div>
<div class="box2">
    <p class="text2">Text2</p>
</div>
<div class="box3">
    <p class="text3">Text3</p>
</div>

.box1 {
    font-size: 20px;
}
.text1 {
    height: 2em;
}

.text2 {
    font-size: 2em;
    height: 2em;
}

.text3 {
    font-size: 20px;
    height: 2em;
}

根据运行结果，可证 @hayahayao 的回答。

allenGKC · 2020-08-31T01:48:00Z

可以看下这篇文章，写的蛮详细的：CSS units for font-size: px | em | rem

MrZ2019 · 2020-09-04T01:25:35Z

px是css中的逻辑像素，和移动端的物理像素之间会有一个比值dpr
em是指相对于父元素的大小
rem中的r就是root，也就是相对于root元素的大小（html标签）

GuYueJiaJie · 2020-09-04T02:46:10Z

px是css中的逻辑像素，和移动端的物理像素之间会有一个比值dpr
em是指相对于父元素的大小
rem中的r就是root，也就是相对于root元素的大小（html标签）

em不是相对父元素

maxthonl · 2020-10-26T09:59:20Z

em是相对自身标签的font-size大小，哪是什么相对父元素咯

这么说其实是不对的，一旦指定em，那么font一定是通过继承获得的，所以必定是父元素那里来的

GodEnd · 2021-03-21T10:47:45Z

px 像素点宽度， em相对于元素标签的font-size的倍数， rem相对于html根元素的font-size宽度

xiezhenghua123 · 2021-04-11T06:56:38Z

px是像素单位
rem是根据根节点font-size的大小决定的，浏览器默认1rem=16px
em是根据父节点的大小决定的

lxt-ing · 2021-04-16T01:34:20Z

px:固定长度
em:相对于自身字体大小的倍数
rem:相对于html根元素的大小的倍数，常用于移动端，pc端不推荐使用

youyanhui · 2021-07-16T07:41:34Z

px 像素单位相对于是屏幕的分辨率
em 默认情况下 1em = 16px ;
但em会继承父级元素的紫婷大小，比如：父元素设置为1.2em,这时子类元素又设置为1.2em,但实际上子元素的大小为1.2*1.2=1.44em，如果子元素字体要和父元素一样大，要么不设置直接继承，要么就得设置成1em。这个1em实际就是相对于1.2em，如果2em，那么实际就是2.4em。
rem 和em 类似，但它不会继承root元素得大小，也就rem相对于得只是根元素，可以说是em得优化版

amikly · 2021-10-28T16:00:06Z

px

px（像素）是绝对长度单位，1px = 1/96th of 1in

em

em 是相对长度单位

在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width

若当前行内文本的字体尺寸未被设置，则相对于浏览器的默认字体尺寸

rem

rem 是相对长度单位

相对于根元素(<html>)的字体大小

syfine · 2022-04-13T02:04:13Z

px是像素。用px设置字体大小比较精确，但是当浏览器页面缩放时，px不会跟随变化
em是相对长度单位。继承父元素的字体大小
rem相对于html根元素大小

WangXi01 · 2022-07-12T10:16:39Z

px：像素，相对显示器屏幕分辨率而言，在ipone手机里面，有一个dpr的问题
em：用于font-size属性时，是该元素继承的font-size缩放因子，也就是相对于父元素的font-size大小；用于计算盒模型大小时，不是基于继承的font-size，而是基于元素自身计算的font-size。
font-size属性的em 和ex单位值相对于父元素的字体大小（不像其他属性，它们指的是相对当前元素的字体大小）。这意味对于font-size属性来说，em 单位和百分比单位的作用是一样的。
rem：相对于html根元素的字体大小，所以如果是用的rem，可以更改根元素的字体大小，调整整个网页的字体大小。

Iambecauseyouare · 2023-02-18T03:12:35Z

px是绝对长度单位，em和rem是相对长度单位，em的值不是固定的，并会继承父级元素的字体大小，rem总是相对于根元素，而不像em一样使用级联的方式来计算尺寸

Lam-Big-Water · 2023-06-23T06:23:17Z

px: 绝对单位。即 5px 放在哪里都一样大。

em: 相对单位。1em等于当前元素的字号，其准确值取决于作用的元素。

rem: 相对单位。rem 是 root em 的缩写。 rem 不是相对于当前元素，而是相对于根元素的单位。不管在文档的什么位置使用rem，即 1.2rem 都会有相同的计算值：1.2乘以根元素的字号。

lxt-ing · 2023-06-23T06:23:39Z

你的邮件我已收到，我会尽快处理

lili-0923 · 2024-02-02T08:28:36Z

px是相对于显示器屏幕分辨率而言的，固定的一种单位。
em是相对于父元素的字体大小而言的，譬如父元素字体大小为16px，那么1em=16px，2em=32px。
rem是相对于根元素（html）字体大小而言的，浏览器默认的字体大小都是16px，那么1rem=16px，2rem=32px，可以根据设备的宽度，结合媒体查询（@media）来进行自适应的布局。
vw是窗口的实际宽度，1vw=1% 窗口的实际宽度。

Kiss-wlm · 2024-03-26T01:05:22Z

px是固定的像素单位，em是相对于父元素的字体大小而rem是相对于根元素的字体大小。

haizhilin2013 added the css css label Apr 25, 2019

zivenday mentioned this issue Aug 13, 2019

对比下px、em、rem有什么不同？ zivenday/learning#29

Open

xiaoyucoding mentioned this issue Jul 21, 2020

关于响应式布局，你必须要知道的 ljianshu/Blog#38

Open

haizhilin2013 mentioned this issue Apr 4, 2021

[css] 第720天 rem和px的换算规则是怎样的？ #3777

Open

[css] 第10天 对比下px、em、rem有什么不同？ #29

[css] 第10天 对比下px、em、rem有什么不同？ #29

Comments

haizhilin2013 commented Apr 25, 2019

tiyunchen commented Jun 1, 2019

AricZhu commented Jun 19, 2019

chenliwen123 commented Jul 9, 2019

Vi-jay commented Jul 25, 2019

Konata9 commented Jul 25, 2019

小技巧

xcLtw commented Sep 2, 2019

GuYueJiaJie commented Sep 14, 2019

LeiDeMing commented Sep 19, 2019 • edited

Daniel-Fang commented Sep 20, 2019

小技巧

thonyl19 commented Oct 6, 2019 • edited

censek commented Oct 11, 2019 • edited

PX

EM

REM

hayahayao commented Oct 28, 2019

abueavan commented Nov 1, 2019

wsylws commented Nov 8, 2019

hexuerong commented Dec 2, 2019

yyz841875845 commented Dec 23, 2019

zlqGitHub commented Dec 27, 2019 • edited

huangd-d commented Mar 18, 2020

qiqingfu commented Apr 4, 2020 • edited

blueRoach commented May 26, 2020

giggleCYT commented Jun 3, 2020

Fengzhen8023 commented Jun 30, 2020

xiaoyucoding commented Jul 16, 2020 • edited

allenGKC commented Aug 31, 2020

MrZ2019 commented Sep 4, 2020

GuYueJiaJie commented Sep 4, 2020

maxthonl commented Oct 26, 2020

GodEnd commented Mar 21, 2021

xiezhenghua123 commented Apr 11, 2021

lxt-ing commented Apr 16, 2021

youyanhui commented Jul 16, 2021

amikly commented Oct 28, 2021

px

em

rem

syfine commented Apr 13, 2022

WangXi01 commented Jul 12, 2022

Iambecauseyouare commented Feb 18, 2023

Lam-Big-Water commented Jun 23, 2023

px: 绝对单位。即 5px 放在哪里都一样大。

em: 相对单位。1em等于当前元素的字号，其准确值取决于作用的元素。

rem: 相对单位。rem 是 root em 的缩写。 rem 不是相对于当前元素， 而是相对于根元素的单位。 不管在文档的什么位置使用rem， 即 1.2rem 都会有相同的计算值：1.2乘以根元素的字号。

lxt-ing commented Jun 23, 2023 via email

lili-0923 commented Feb 2, 2024

Kiss-wlm commented Mar 26, 2024

[css] 第10天对比下px、em、rem有什么不同？ #29

[css] 第10天对比下px、em、rem有什么不同？ #29

LeiDeMing commented Sep 19, 2019 •

edited

thonyl19 commented Oct 6, 2019 •

edited

censek commented Oct 11, 2019 •

edited

zlqGitHub commented Dec 27, 2019 •

edited

qiqingfu commented Apr 4, 2020 •

edited

xiaoyucoding commented Jul 16, 2020 •

edited

rem: 相对单位。rem 是 root em 的缩写。 rem 不是相对于当前元素，而是相对于根元素的单位。不管在文档的什么位置使用rem，即 1.2rem 都会有相同的计算值：1.2乘以根元素的字号。