px、em、rem、%、vw、vh、vm等单位有什么区别？

最新推荐文章于 2025-05-14 13:23:59 发布
转载 最新推荐文章于 2025-05-14 13:23:59 发布 · 1.1k 阅读 · 7 ·
CC 4.0 BY-SA版权
原文链接：https://segmentfault.com/a/1190000017528882
文章标签：

#前端 #ViewUI

本文深入讲解了CSS中px、em、rem、%、vw、vh、vm等单位的区别，包括它们的基本概念、应用场景及计算方式，帮助前端开发者更好地理解和运用这些单位，实现响应式设计。

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

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【px、em、rem、%、vw、vh、vm等单位有什么区别？】

px、em、rem、%、vw、vh、vm等单位有什么区别？

 

大家好，我是IT修真院西安分院第5期的学员许恒倩，一枚正直纯洁善良的web程序员，今天给大家分享一下，修真院官网CSS任务三，深度思考中的知识点——px、em、rem、%、vw、vh、vm等单位有什么区别？

（1）背景介绍：

传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，

并且拥有比较良好的兼容性。但是从css3开始，浏览器对逻辑单位的支持又提升到了另外一个境界，

增加了rem、vh、vw、vm等一些新的长度单位，我们可以利用这些新的单位开发出比较良好的响应式页面，

随之覆盖多种不同分辨率的终端，包括移动设备等。接下来就讲下这些长度单位有什么区别。

（2）知识剖析：

  1. PX

 

px单位名称为像素，像素是固定大小的单元,用于屏幕媒体(即在电脑屏幕上读取)。一个像素等于电脑屏幕上的一个点

(是你屏幕分辨率的最小分割)。是 CSS 中最常用的长度单位，可以用来指定字体大小，元素的宽度、高度、边框、内边距，外边距的大小等等

px是绝对长度单位，它不会根据屏幕的大小进行调整。

2.%

百分比是一个相对长度单位，相对于包含块（containing block）的高宽或字体大小。

关于包含块（containing block）的概念，不能简单地理解成是父元素。

如果是静态定位和相对定位，包含块一般就是其父元素。

如果是绝对定位的元素，包含块应该是离它最近的 position为非static属性的祖先元素。

如果是固定定位的元素，它的包含块是视口（viewport）

  1. EM

em是相对字体长度单位。如果用于font-size属性本身，则是相对于父元素的font-size。

em单位有如下特点：

  1. em的值并不是固定的;
  2. em会继承父级元素的字体大小。

em是继承父元素的字体大小，可是当父元素字体大小改变时，又得重新计算了。

  1. REM

rem是CSS3新增的一个相对字体长度单位，只相对根元素即html元素字体大小

所以我们只要在html标签上设置字体大小为标准，文档中的字体大小都会以此为参照

我们知道任意浏览器的默认字体大小都是16px。

为了简化font-size的换算，需要在css中的根元素html中声明font-size=62.5%，这就使rem值变为 16px*62.5%=10px,

这样 10px=1rem, 也就是说只需要将你的原来的px数值除以10，然后换上rem作为单位就行了

 

  1. VW 和VH

CSS3新增的长度单位,分别是viewpoint Width和viewpoint Height的缩写。

1vh 等于1/100的视口高度。举个列子：浏览器高度900px, 1 vh = 900px/100 = 9 px。

同理，如果视口宽度为750， 1vw = 750px/100 = 7.5 px

  1. VM

vmin 是当前 vm 和 vh 中较小的一个值，也就是说，是可视区域较小的一边的1/100的长度；

例如：可视区大小为 1000x800, 则 wmin = 800/100 = 8px;

如果可视区大小为 600x800, 则 wmin = 600/100 = 6px;

 

类似的, vmax 是当前 vm 和 vh 中较大的一个值，也就是说，是可视区域较大的一边的1/100的长度；

例如：可视区大小为 1000x800, 则 wmin = 1000/100 =10px;

如果可视区大小为 600x800, 则 wmin = 800/100 = 8px;

（3）常见问题：

在使用REM为单位时，为何将HTML的FONT-SIZE:625%

（4）解决方案：

大部分现代浏览器默认时16px,chrome强制最小字体为12号，即使设置成 10px 最终都会显示成12px，

当把html的font-size设置成10px,子节点rem的计算还是以12px为基准，

所以提到的将html的font-size设为10方便计算不是那么可取)。导致chrome的em/rem计算不准确。

为了解决这个坑，设置html字体为625%，即100px，body 修正为16px，这样 0.1rem 就是 10px，

而body的字体仍然是默认大小，不影响未设置大小的元素的默认字体的大小。

（5）编码实战：

body {

    font-size: 20px;

}

.txt {

    font-size: 1.5em;

}

.block {

    font-size: 1.5em;

}

</style>

<body>

    <div class="txt">

        我是文字

        <div class="block">

            我是文字2

        </div>

    </div>

</body>

（6）拓展思考：

CSS还有哪些长度单位？

英寸in(inches) 1in = 96px

 

厘米cm(centimeters) 1cm = 37.8px

 

点pt(points) 　1pt = 1.33px

 

派卡pc(picas) 1pc = 16px

（7）参考文献：

参考：

 

你可能不了解的七个 CSS 单位 

CSS/CSS3长度、时间、频率、角度单位大全--张鑫旭

（8）更多讨论：

Q1：提问人：如果父元素没有指定高度，那么子元素的百分比的高度是多少？
 

A1：我：会按照子元素的实际高度，设置百分比已经没有效果了。

 

（9）结束语：

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

CSS 计量单位（px、%、ch、cm、em、ex、gd、in、mm、pc、pt、q、rem、vh、vm、vmax、vmin、vw）比较
郭宝的博客
10-24 5260
px % ch cm em 定义：em单位和%单位是一样的，一个em相当于当前标签中的字体大小(font-size)的大小，一般小数用em来表示。 示例： ex gd in mm pc pt q rem vh vm vmax vmin ...
day22 - 移动端布局方案rem、vw和vh、媒体查询、flexible
最新发布
u010544438的博客
08-10 43
《CSS相对单位与响应式布局技术解析》摘要 本文系统介绍了CSS中rem、vw/vh等相对单位的原理与应用。rem基于根元素字体大小，具有全局可控性；vw/vh则直接关联视口尺寸，实现动态响应。文章详细对比了五种主流适配方案： 流式布局（百分比）存在计算复杂、比例失调问题 媒体查询+rem需编写大量查询语句 rem+JS动态计算实现精准比例但存在耦合性 vw/vh方案支持视口百分比但需处理兼容性 flexible.js提供自动化rem适配 通过赶集网案例演示了媒体查询+rem的实际应用，包括： 基准font
css height:单位 % 高度 跟vh高度区别
m0_37678007的博客
01-09 1452
以上内容来自：[chatgpt中文网][https:bk.suning.info]
px、em、rem、vw、vh、vmax、vmin的区别
yiyueqinghui的博客
07-13 857
各距离单位的区别 px：相对长度单位，是相对于显示器的屏幕分辨率而言的。 优点：比较稳定和精确； 缺点：如果用户对浏览器进行缩放，这时会使用我们的Web页面布局被打破； em：相对单位，基准点为父节点字体的大小. rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算. CSS3新加属性，chrome/firefox/IE9+支持) 另外需注意chrome强制最小字体为12号，即使设置成 10px, 最终都会显示成 12px，当把html的font-size设置
px、em、rem、vm、vw 、vh、vmin 、vmax区分
a153052的博客
12-20 1297
Px表示“绝对尺寸”（并非真正的绝对），实际上就是css中定义的像素（此像素与设备的物理像素有一定的区别，后续详细说明见文末说明1），利用px设置字体大小及元素宽高等比较稳定和精确。Px的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。 em表示相对尺寸，其相对于当前对象内文本的font-size（如果当前对象内文本的font-size计量单位也是em，则当前对象内文本的font...
关于 vm vh 单位
weixin_30299709的博客
11-14 269
“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。 如果视区宽度是100vw, 则1vw是视区宽度的1/100, 也就是1%，类似于width: 1%。 vh是高度. 转载于:https://www.cnblogs.com/joesbell/p/606299...
css中vh/vw与%的区别
这是个问题
11-15 1317
vh与%的区别
【高频考点精讲】CSS 中的单位解析：px、em、rem、vw、vh 的使用场景
全栈老李的博客
05-14 1041
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。今天咱们聊聊CSS中那些让人又爱又恨的单位——px、em、rem、vw、vh。作为前端工程师，这些单位就像厨房里的调味料，用对了能让页面美味可口，用错了...嗯，你懂的。（全栈老李友情提示：文末有面试题彩蛋，记得看到最后哦～）
px|pt|rpx|em|rem|vm|vh
qq_41864339的博客
12-29 327
px pt 参考 pt em em 参考 vh vw 参考 一. 概念解析 px:pixel,屏幕上显示数据的基本点 pt :point,印刷业常用单位 dpi(ppi):dot per inch(pixel per inch) 每英寸的像素点 rpx:responsive pixel（微信小程序专用）可以根据屏幕宽度进行自适应 em:相对于父元素的字体大小，em会继承父级元素的字体大小 rem:root em,相对于HTML根元素的字体大小 vw:view width 视口宽度 100.
rem和vw单位与移动端适配最佳实践
读心悦
07-21 603
在移动端适配中，和单位都是非常重要的工具，它们各自具有独特的优势和应用场景。以下是关于这两个单位及其在移动端适配中的最佳实践：定义与原理：优点：缺点：最佳实践：定义与原理：优点：缺点：最佳实践：在实际开发中，可以根据项目的具体需求和目标设备的范围来灵活选择使用或单位，或者将两者结合起来使用。例如，可以使用单位来实现整体布局的缩放，而使用单位来设置某些需要精确适应视口宽度的元素尺寸。同时，还可以结合CSS预处理器、媒体查询等技术手段来提高开发效率和适配效果。总之，和单位在移动端适配中都具有重要作用，通过合理运
今天又学一招 vh和%的区别 vh的妙用
weixin_43958820的博客
07-07 8652
vh和%的区别 vh的妙用 vh与%的区别 vh是长度单位, vh是根据浏览器视口的高度变化; vw则是根据浏览器视口的宽度变化, 视口就是浏览器的可视区域 把浏览器可视区宽高平均分成100份, 那1vh就是可视区高1/100, 1vw就是可视区宽的1/100, 所以最好的上限设置就是100vh或100vw, 这个看个人需要 %是根据父盒子或根元素的宽高, 来进行百分比宽高显示, 父盒子变化, %等比变化 vh的用法之一 容器滚动条 当盒子的宽高设置了vh和vw后, 并把盒子设置overflow:
VW、VH、%的区别和作用以及应用场景
m0_74359467的博客
10-17 1430
%呢他是根据父元素进行定位的，所以你这个项目在你的电脑上是完美的，但是到了别人的电脑上就会出现样式混乱崩塌的效果。所以一般呢再写可视化的时候尽量全用VW和VH，这样你的样式放在任何电脑上都不会出现样式崩塌混乱的样子。：如果是随着父容器或者是整体页面布局而改变尺寸，则使用%更好，如元素的高度和宽度设置。相对长度单位：相对于父元素的百分比值，若父元素宽高改变，子元素会随之改变。如果有哪里说的不对的地方，请多多指教大家一起加油，共同学习！：VH和VW的查究仅次于一个是在于宽度，一个在于高度。
vh，vw，px，%有什么区别
2301_79265530的博客
11-28 1075
这意味着元素的宽度将根据其内部内容的大小来确定，并且会占据剩余可用空间。如果没有设置父容器的宽度限制，元素的宽度将默认为100%。时，元素的宽度可能会受到父容器的限制或其他样式的影响，例如边框、内边距、外边距等。此外，如果父容器没有具体的宽度值（例如未设置宽度或使用百分比作为宽度），那么。这意味着元素的宽度将填满父容器的可用空间，无论内部内容的大小如何。vh、vw、px和%都是用于设置CSS的长度单位，它们各自有不同的特点和使用场景。所以，这两个属性的主要区别在于宽度的计算方式和占据空间的方式。
前端HTML中vm和vh单位的使用
个人笔记
03-03 2543
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="t
css中px、em、rem、%、vw、vh、vm、rpx 这些单位的区别
qq_39951524的博客
10-22 1722
css中px、em、rem、%、vw、vh、vm、rpx 这些单位的区别
px、em、rem、%、vw、vh、vm的区别
Ldajiangyou的博客
04-07 1182
px px 就是 pixel 的缩写，意思是：像素 px 就是设备或者图片最小的一个点，比如常常听到的电脑像素是1920x1080的，表示的是水平方向是1920个像素点，垂直方向是1080个像素点。 px 是我们网页设计常用的基本单位。通过px可以设置固定的布局或者元素大小，缺点是不能弹性。 em em的值并不是固定的，会继承父级元素的字体大小参考物是父元素的font-size（浏览器默认字体是16px），具有继承的特点。如果自身定义了 font-size 那么会按自身来计算，整个页面内1em不是一个
px、em、rem、vm、vh、vw的区别
langziangTom的博客
02-17 1091
px、em、rem、vm、vh、vw的区别
取值单位（px，em，rem，%，vh，vw）的区别
JAYCHENLA的博客
03-21 2990
取值单位（px，em，rem，%，vh，vw）的区别 取值单位的分类 1、固定单位（绝对单位）：px px：像素（pixel）的缩写，是一个相对长度单位，像素px是相对于屏幕分辨率而言的 2、相对单位：em，rem，%，vh，vw **em：**相对长度单位，相对于当前对象内文本的字体尺寸【是所在标签的字体大小】（参考物是父元素的font-size）， 如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸 特点： em的值并不是固定的； em会继承父级元素的字体大小； 例子，例如父元素为浏览器(g
rpx px em rem % vh vw的区别
06-28
### 回答1： rpx是小程序中的单位，可以根据屏幕宽度进行自适应缩放，适用于小程序开发。 px是像素单位，是网页开发中最常用的单位，不具有自适应性。 em是相对于父元素字体大小的单位，适用于网页开发中的字体大小设置。 rem是相对于根元素字体大小的单位，也适用于网页开发中的字体大小设置。 %是相对于父元素的百分比单位，适用于网页开发中的宽度、高度、边距等设置。 vh和vw是相对于视口高度和宽度的单位，适用于网页开发中的响应式布局。 ### 回答2： 1. rpx：rpx 是小程序中自带的一种单位，是可以根据屏幕宽度自适应的单位，即在不同设备上展示的物理尺寸相同。rpx 的设计理念是为了满足不同屏幕分辨率下 UI 图片等素材大小的自适应，它根据设备宽度进行换算，当屏幕宽度为 750 时，1rpx 就等于 1px，当屏幕宽度小于或大于 750 时，1rpx 的值也会相应缩放或放大。在开发小程序时，如果需要让视觉稿能够自动调整到不同设备上，使用 rpx 单位是非常方便的。 2. px：px 单位是 web 开发中最常用的单位，它是一个绝对的单位，不会因为屏幕大小而变化，是一个固定的值。 3. em：em 是相对单位，它是根据自身字体大小的倍数来确定元素的大小。因为 em 的值是基于父元素的字体大小计算的，所以通常用于设置文本的字体大小。比如一个元素的 font-size 为 16px，设定它的子元素 font-size: 0.5em，则子元素字体大小为 8px。 4. rem：rem 是相对单位，它是根据根元素的字体大小来确定元素的大小，即根元素的 font-size 所对应的值。相比 em，它更为灵活，因为根元素的字体大小可以通过 JavaScript 动态改变，因此 rem 也可以方便地实现响应式布局。 5. %：百分比也是相对单位，它是相对于包含块的大小进行计算。如果一个元素的宽度为 50%，则它的宽度大小会自动调整为包含块的一半。 6. vh 和 vw：vh 和 vw 是视口尺寸的相对单位，vh 表示视口高度的百分比，vw 表示视口宽度的百分比。如果一个元素的宽度设置为 50vw，则它的宽度将自动调整为视口宽度的一半。使用 vh 和 vw 可以方便地实现基于视口适应的响应式布局。 ### 回答3： rpx、px、em、rem、%、vw、vh 都是网页开发中经常使用的单位。在网页开发中，我们经常需要根据屏幕大小和分辨率来设置文本、元素的大小和位置。这些单位的不同使用场景也不同，下面我将详细介绍各个单位的区别。 1. rpx rpx是小程序独有的单位，原意为responsive pixels，中文翻译为响应式像素。在小程序中，rpx被设计为可根据屏幕宽度自适应的单位，1rpx等于屏幕宽度的1/750。因此，rpx的使用场景主要是小程序中一些比较小的元素，如边框线、小图标等的大小或距离的设置。 2. px px是像素的意思。在Web开发中，px通常指屏幕上的一个像素点，即一个设备像素（Device Pixel）。使用px设置元素大小与距离时，元素的大小和距离不受页面缩放影响，不具备响应式设计特性。一般在设置一些固定大小元素的时候就会使用px单位。 3. em em单位是相对单位，指相对于当前元素的字体大小。例如，一个元素的字体大小为10px，那么设置它的margin为2em，表示为20px。em单位在设置字体大小时尤其有用，因为可以实现文本的相对大小调整。 4. rem rem单位也是相对单位，但是是相对于根元素的字体大小。例如，如果根元素html的字体大小为16px，那么1rem等于16px。使用rem可以实现相对大小的控制，而且可以随着页面大小的变化而变化，非常方便。 5. % 百分比单位是相对于父元素的大小。例如，如果一个元素的宽度设置为50%，则其宽度为其父元素宽度的50%。%单位在设置图片大小时比较常用，可以保证图片大小与容器大小的比例不变。 6. vw和vh单位 这两个单位是针对视窗大小的相对单位。vw代表视窗宽度的百分比，vh代表视窗高度的百分比。例如，一个元素的宽度设置为50vw，表示其宽度为视窗宽度的50%。这些单位在移动端的响应式开发中用得比较多。 综上所述，各个单位的使用场景是不同的。在实际开发中，需要根据不同的情况选用不同的单位来设置元素的大小或位置。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值