Fe-interview: [css] 第10天 对比下px、em、rem有什么不同？
第10天 对比下px、em、rem有什么不同？
haizhilin2013
All 27 comments
默认情况下: 1em = 10px; 1rem = 16px
tiyunchen
on 1 Jun 2019
px是css中的逻辑像素，和移动端的物理像素之间会有一个比值dpr
em是指相对于父元素的大小
rem中的r就是root，也就是相对于root元素的大小（html标签）
AricZhu
on 19 Jun 2019
px 是固定的值 em 是相对父级变换大小 rem 是相对html,body大小变换的
chenliwen123
on 9 Jul 2019
1em = 当前元素的字体大小，1rem = 当前html元素的字体大小
Vi-jay
on 25 Jul 2019
- px: 绝对固定的值，无论页面放大或者缩小都不会改变。
- em: 相对父元素字体大小的倍数。如果父元素的字体为
12px，那么子元素1em就是24px。由于是相对父级的倍数，所以多层嵌套时，倍数关系的计算会很头痛。 - rem: 相对根元素字体大小的倍数。相对于
html的字体大小，如果不做任何修改，浏览器默认字体大小为16px。
小技巧
如果为了方便计算 rem，可以设置 font-size= 62.5% 这样一来默认的字体就变成 10px 了。之后的 rem 就是以 10 为基准了。
Konata9
on 25 Jul 2019
- em和rem属于与font-size有关的长度单位，大小不固定，个人体验在多设备上优于px但不如视图系列单位
- px属于绝对长度单位，类似的还有cm,mm 。在不同设备上表现的宽度可能不一致，但相对长度固定
- vw,vh 属于与视图大小有关的长度单位，vw为当前视图宽度的 1%.vh为当前视图高度的 1%
xcLtw
on 2 Sep 2019
那么多回答em是相对父元素大小的麻烦你们严谨一点好吗。。
GuYueJiaJie
on 14 Sep 2019
em是相对自身标签的font-size大小，哪是什么相对父元素咯
LeiDeMing
on 19 Sep 2019
- px: 绝对固定的值，无论页面放大或者缩小都不会改变。
- em: 相对父元素字体大小的倍数。如果父元素的字体为
12px，那么子元素1em就是24px。由于是相对父级的倍数，所以多层嵌套时，倍数关系的计算会很头痛。- rem: 相对根元素字体大小的倍数。相对于
html的字体大小，如果不做任何修改，浏览器默认字体大小为16px。小技巧
如果为了方便计算
rem，可以设置font-size= 62.5%这样一来默认的字体就变成10px了。之后的rem就是以10为基准了。
如果父元素font-size: 12px; 子元素设置 font-size: 1em; 则为12px; 不是24px;
Daniel-Fang
on 20 Sep 2019
關於 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
thonyl19
on 6 Oct 2019
PX
像素，相对长度单位，px 是相对显示器屏幕分辨率而言的。
EM
相对长度单位，em 相对于当前对象内文本的字体尺寸。通常 1em = 16px。
REM
root em，CSS3 新增的一个相对单位。
使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用 px 即可 。
对于需要适配各种移动设备，使用 rem。
censek
on 11 Oct 2019
关于em，存在两种情况：
- 用于
font-size属性时，是该元素继承的font-size缩放因子，也就是相对于父元素的font-size大小； - 用于计算盒模型大小时，不是基于继承的
font-size，而是基于元素自身计算的font-size
hayahayao
on 28 Oct 2019
px 定长，放大缩小不改变，不同设备dpr( 物理像素 / 独立像素)不同，低分辨率屏幕dpr=1，高分辨率屏幕>1
em相对大小，当前字体的倍数
rem相对大小，类似于em，根元素html字体大小的倍数
abueavan
on 1 Nov 2019
px： 在缩放页面时无法调整那些使用它作为单位的字体、按钮等的大小；
em：相对单位，会继承父级元素的字体大小，代表倍数。
rem：相对单位，始终是基于根元素HTML的，代表倍数。
wsylws
on 8 Nov 2019
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特点：
- em的值并不是固定的；
- em会继承父级元素的字体大小；
- 要重新计算那些被放大的字体的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;}
hexuerong
on 2 Dec 2019
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 容易出错
yyz841875845
on 23 Dec 2019
首先他们都是长度大小单位，但有所不同：
- px是像素单位，指定多少就是多少，方便于计算；
em的值是不固定的，相对于父级元素，并且会继承父级元素的字体大小。默认浏览器的字体大小为16px，不对浏览器做处理时，1em = 16px; 那么 12px = 0.75em；
rem相对于根元素的html字体大小，规格屏幕的宽度是20rem；那么 1rem = (750/20)rpx;
zlqGitHub
on 27 Dec 2019
em是相对自身标签的font-size大小，哪是什么相对父元素咯
特看了下 w3c 上面。 为什么都说是 父元素。。。也不知道谁先提出来的！坑啊
huangd-d
on 18 Mar 2020
px: 1px也就是1像素, 对于普通的屏幕, 通常就是一个设备像素点
em: 相对长度单位，这个单位表示元素的 font-size 的计算值。如果用在 font-size 属性本身，它则表示元素继承的 font-size 值
rem: 代表根元素的 font-size 大小(
<html>元素的font-size)。当用在根元素的 font-size 上面时，它代表了它的初始值
qiqingfu
on 4 Apr 2020
px：像素点的宽度
em：该元素字体像素大小 * 希望得到的多少倍
rem：根元素字体像素大小 * 希望得到的多少倍
blueRoach
on 26 May 2020
1、px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
2、em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
3、em是相对于其父元素来设置字体大小的，一般都是以
的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值。对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。
giggleCYT
on 3 Jun 2020
@GuYueJiaJie
那么多回答em是相对父元素大小的麻烦你们严谨一点好吗。。
@LeiDeMing
em是相对自身标签的font-size大小，哪是什么相对父元素咯
em是相对自身标签的font-size大小，但是该属性是可以从父元素继承的。
所以很多人误认为em是相对于父元素标签中的font-size大小。
Fengzhen8023
on 30 Jun 2020
关于
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>
.box1 {
font-size: 20px;
}
.text1 {
height: 2em;
}
.text2 {
font-size: 2em;
height: 2em;
}
根据运行结果，可证 @hayahayao 的回答。
xiaoyucoding
on 16 Jul 2020
可以看下这篇文章，写的蛮详细的：CSS units for font-size: px | em | rem
allenGKC
on 31 Aug 2020
px是css中的逻辑像素，和移动端的物理像素之间会有一个比值dpr
em是指相对于父元素的大小
rem中的r就是root，也就是相对于root元素的大小（html标签）
MrZ2019
on 4 Sep 2020
px是css中的逻辑像素，和移动端的物理像素之间会有一个比值dpr
em是指相对于父元素的大小
rem中的r就是root，也就是相对于root元素的大小（html标签）
em不是相对父元素
GuYueJiaJie
on 4 Sep 2020
em是相对自身标签的font-size大小，哪是什么相对父元素咯
这么说其实是不对的， 一旦指定em，那么font一定是通过继承获得的，所以必定是父元素那里来的
maxthonl
on 26 Oct 2020
Related issues
haizhilin2013
·
3Comments
haizhilin2013
·
3Comments
haizhilin2013
·
3Comments
haizhilin2013
·
3Comments
haizhilin2013
·
3Comments
Most helpful comment
em是相对自身标签的font-size大小，哪是什么相对父元素咯