彻底弄懂css中单位px和em，rem的区别

最新推荐文章于 2025-07-11 21:18:36 发布
转载 最新推荐文章于 2025-07-11 21:18:36 发布 · 68 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/liaojie970/p/7008792.html

本文详细解释了PX、EM和REM三种单位在Web开发中的应用。PX是一种稳定的单位但随浏览器缩放变化；EM是相对值，依赖于父元素的字体大小；REM则相对于根元素，提供更灵活的布局方案。 
PX:
PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，
如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。
因此，这时就提出了使用“em”来定义Web页面的字体。

EM:
EM就是根据基准来缩放字体的大小。EM实质是一个相对值，而非具体的数值。这种技术需要一个参考点，一般都是以<body>的“font-size”
为基准。如WordPress官方主题Twenntytwelve的基准就是14px=1em。
另外，em是相对于父元素的属性而计算的

Rem:
EM是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。
而Rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。

浏览器的兼容性
除了IE6-IE8r，其它的浏览器都支持em和rem属性，px是所有浏览器都支持。
因此为了浏览器的兼容性，可“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。

转载于:https://www.cnblogs.com/liaojie970/p/7008792.html

CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】
橙-极纪元-JJYCheng
06-22 9638
CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】
解密CSS单位：px、em、vh的区别与应用
todoitbo的博客
04-09 2998
本文将深入探讨CSS中常用的单位px、em、vh的区别与应用场景。我们将详细解释这些单位的特点，以及在实际开发中如何选择合适的单位来实现设计需求。
一文搞懂像素（px）、分辨率、CSS长度单位
热门推荐
qq_37384271的博客
11-04 3万+
对于做前端的朋友，相信看到像素（pixel）、分辨率、CSS长度单位（如：px、em、rem、vh）这些概念都不陌生，但是对它们之间的关系是否清楚呢？以及如何区分应用场景？本文将讲清楚这些内容。 一、像素 像素是图像的基本采样单位，它不是一个确定的物理量，也不是一个具体的点或小方块（尽管可以用点或小方块来呈现），而是一个抽象概念。 不同的设备，其图像基本单位是不同的，比如显示器的点距，可以认为是显示器的物理像素。现在的液晶显示器的点距一般在0.25mm到0.3mm之间。 液晶显示器点距参考表（1 英寸 =
css中px、em、rem、%、vw、vh、vm、rpx 这些单位的区别
qq_39951524的博客
10-22 1755
css中px、em、rem、%、vw、vh、vm、rpx 这些单位的区别
css样式单位px，em，pt，ex，pc，in，mm，cm详解
很酷的站长的博客
10-28 6151
1、px：像素(Pixel),相对于设备的长度单位，像素是相对于显示器屏幕分辨率而言的。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。相对于元素的字体大小（font-size），如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。其实css中的长度单位有px、em、pt、in、ex、pc、mm、cm、ch、rem、vw、vh、vmin、vmax。在写css样式的时候最常用的长度单位是px(像素)，除此之外经常会碰到em、pt等等。有两种类型的长度单位：相对和绝对。
知识普及：彻底搞懂CSS中单位px和em,rem的区别
09-24
px、em和rem是三种常用的长度单位，它们各有特点，适用于不同的场景。 **px（像素）**是最常见的单位，表示的是物理像素，它是相对于显示器分辨率而言的。使用px定义的元素大小在任何设备上都将保持不变，因此对于...
px、em 和 rem 的区别：深入理解 CSS 中的单位
Ttbraver
01-14 1502
授人以鱼，不如授人以渔。
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...
css中px、em和rem的区别总结
09-24
相信每位前端工程师们都有这么一个体会，国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，...下面这篇文章小编就来给大家详细介绍关于css中px、em和rem的区别，需要的朋友可以参考借鉴，下面来一起看看吧。
CSS中的常见单位（px,%,em,rem,vw,vh,vmax,vmin,calc)
楠姐的博客
02-15 2992
CSS中的常见单位区别
CSS 中的像素(px)
学习真香
03-28 3419
CSS 中的像素(px) px 是一个我们经常在开发中使用的一个单元; 它表示在屏幕上展示的最小单元; 但是, 在 CSS 中像素可能和我们想象的不太一样. CSS 中的 px 是逻辑距离还是物理距离 答: 是逻辑距离; 像素(pixel)在浏览器中是一个表示距离的绝对单位(absolute unit); 同时, 在 CSS 中它是一个相对像素 (reference pixel); 浏览器会根据设备像素比(devicePixelRatio), 来展示图像; 所以, 在 CSS 中 1px 可不一定对应真实在
CSS—相对单位px
雷雨天的雷胖子
12-29 899
目录 一、概述 二、精度 三、拓展 一、概述 px是一个相对单位，也是一个虚拟长度单位，称为虚拟像素或逻辑像素。虚拟像素可以理解为视觉上的像素，是CSS和JS使用的抽象单位，浏览器中的一切长度最终都是以虚拟像素为单位，如rem和em，都是对标的虚拟像素。 二、精度 眼中所看到的屏幕是由一个个物理像素组成，而CSS使用的是逻辑像素px。如果想将逻辑像素转换为物理像素，需要指定精度DPI...
CSS尺寸单位理解px、em、rem、vw、vh
港城大白鲨
07-13 546
掌握相对单位和绝对单位的区别，在合适的场景使用相应的单位，CSS功能日益丰富，网页内容也日益内容多样化，理解其原理，方能知其真谛！
CSS 中px、em、rem、%、vw、vh、vm、rpx、fr 介绍和区别对比
bsklhao的博客
07-11 469
单位基准对象是否响应式级联性典型场景px设备像素❌边框、固定尺寸元素em当前元素/父元素字体✅有与字体关联的内边距/外边距rem根元素（<html>）字体✅❌全局响应式布局父元素对应属性✅流式布局、自适应容器vw/vh视窗宽/高✅❌全屏元素、视窗比例布局vmin视窗宽高中较小值✅❌确保在小视窗方向上的适应性vmax视窗宽高中较大值✅❌确保在大视窗方向上的可见性rpx小程序屏幕宽度（750px）✅❌微信小程序适配frGrid 容器剩余空间✅❌。
CSS基础知识：css的尺寸是如何计算的，px和em的区别在哪里？
我就知道你会来，我们一起进步吧！
03-23 606
px：像素（绝对单位），（这里以文字像素（font-size）解释）简单的理解为文字的高度占多少个像素。
为什么你永远不应该在CSS中使用px来设置字体大小
Jack, what else can you do besides holding your little darling?
04-07 308
当我们为较大的断点编写CSS时，我们认为有足够的屏幕空间让元素扩展。如果用户设置了非常大的字体大小，则可能不是这种情况，将媒体查询设置为 rem​ 而不是 px 可以帮助我们避免这种假设并响应用户的偏好。在Josh Collinsworth的博客文章“永远不要用px作为字体大小”中，作者讨论了为什么不应该使用像素（px）作为网页字体大小的单位[1]。作者指出，相对于容器、浏览器或用户的字体大小，px值是静态的。无论用户的字体偏好设置如何，当您以静态像素设置值时，它将覆盖用户的选择，以您指定的确切值替代。
CSS中的px是什么意思？编程中如何使用它？
CodeLancerX的博客
10-04 3487
需要注意的是，像素单位px在CSS中是相对单位，它会根据显示设备的分辨率进行转换。像素是屏幕上显示的最小单位，CSS中的px用于指定元素的尺寸、位置和间距等。在上面的示例中，.element是一个CSS类名，通过该类名可以选择对应的HTML元素，然后通过设置width和height属性，将该元素的宽度设置为200像素，高度设置为100像素。上面的示例中，margin属性用于设置元素的外边距，padding属性用于设置元素的内边距。总结来说，在CSS编程中，px单位用于指定元素的尺寸、位置和间距等。
css单位中px、em、rem的区别
yzwlogo的博客
06-02 391
区别：IE无法调整那些使用px作为单位的字体大小，而em和rem可以缩放，rem相对的知识HTML根元素。这个单位可谓集相对大小和绝对大小优点于一身，通过他即可以做到只修改根元素就成比例的调整所有字体大小，又可以避免字体大小逐层复合的连锁反应，目前，处了IE8及更早的版本外，所有浏览器都已经支持。px是相对于显示器屏幕的分辨率来的，是一个虚拟的长度大单位，是计算机系统的数字化图像的长度单位。3、rem是css3新增的一个相对单位，使用rem为元素设定字体大小时，仍然时相对大小，但相对的只是HTML跟元素。
CSS 单位详解：px、rem、em、vw/vh 的区别与使用场景
sumiao64427的博客
05-19 693
在 CSS 中，各种单位有不同的特性和适用场景，理解它们的区别对实现响应式布局至关重要。
css单位中px和em、rem、rpx
最新发布
08-30
### px px即像素（Pixel），是相对于显示器屏幕分辨率而言的相对长度单位。其特点是固定的像素，一旦设置了就无法因为适应页面大小而改变。IE无法调整那些使用px作为单位的字体大小，而国外的大部分网站能够调整字体大小的原因在于其使用了em或rem作为字体单位。此外，虽然Firefox能够调整px、em和rem，但96%以上的中国网民使用IE浏览器（或内核）[^1][^3]。 ### em em是相对长度单位，相对于当前对象内文本的字体尺寸。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）。em的值并不是固定的，且会继承父级元素的字体大小。它是相对于其父元素来设置字体大小的，一般以`<body>`的“font - size”为基准。不过这也存在一个问题，进行任何元素设置时，都有可能需要知道其父元素的大小。为了简化font - size的换算，可以在css中的body选择器中声明font - size = 62.5%，这样em值变为16px * 62.5% = 10px，只需将原来的px数值除以10，然后换上em作为单位即可[^1][^3][^5]。 ### rem rem是CSS3新增的一个相对单位（root em，根em）。使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素`<html>`。这个单位集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法是多写一个绝对单位的声明，这些浏览器会忽略用rem设定的字体大小[^1][^2][^4]。 ### rpx 文档中未详细提及rpx的具体信息，但从标题可知它也是CSS单位之一，通常rpx（responsive pixel）是微信小程序独有的尺寸单位，它可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上，屏幕宽度为375px，750rpx = 375px，1rpx = 0.5px。 ### 区别总结 - **固定与相对**：px是固定像素单位，em、rem和rpx是相对单位。 - **相对对象**：em相对于父元素；rem相对于根元素`<html>`；rpx在微信小程序中相对屏幕宽度；px与屏幕分辨率相关。 - **浏览器兼容性**：px兼容性好，所有浏览器都支持；rem除IE8及更早版本外，其他浏览器均支持；em浏览器兼容性也较好；rpx是微信小程序内使用，有特定使用场景。 - **应用场景**：px适用于需要固定尺寸的元素；em和rem更适用于响应式布局；rpx适用于微信小程序开发。 ```css /* 示例代码 */ html { font-size: 16px; /* 设置根元素字体大小 */ } body { font-size: 16px; /* 父元素字体大小 */ } .px-example { font-size: 20px; /* 使用px单位 */ } .em-example { font-size: 1.2em; /* 使用em单位，相对于父元素 */ } .rem-example { font-size: 1.5rem; /* 使用rem单位，相对于根元素 */ } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值