px、em、rem、vh、vw的区别是什么？

最新推荐文章于 2025-07-08 14:41:28 发布

转载最新推荐文章于 2025-07-08 14:41:28 发布 · 866 阅读

文章标签：

#html

前端基础专栏收录该内容

8 篇文章

订阅专栏

本文详细解释了CSS中px、em、rem、vh及vw等单位的基本概念及其应用场景。这些单位分别代表物理像素点、相对父元素字体大小、相对根元素字体大小、视口高度百分比和视口宽度百分比。

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

px代表物理屏幕上能显示出的最小的一个点,
em 是相对于父级的字体大小,
rem是相对于HTML跟元素的字体大小,
vh 和vw相对于视口的高度和宽度,1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

岩岩岩岩_岩

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

前端css高频面试题——em/px/rem/vw/vh的区别？

weixin_47450807的博客

04-06

557

一、px px，表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位中。有些人会把px认为是相对长度，原因在于在移动端中存在设备像素比，px实际显示的大小是不确定的。这里之所以认为px为绝对单位，在于px的大小和元素的其他属性无关。二、em em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）。为了简化 font-size 的换算，我们需

前端基础面试题：rem em vw vw 百分比区别？

sdasadasds的博客

07-28

561

注意vw和vh是视口可以观看的区域的大小；如果没有滚动条的话，则宽度设置成100vw和100%的时候实现的效果一直；如果有滚动的话，则100vw中不是包括滚动条的，100%是包括滚动条的距离的。em如果自身有字体大小的设置，那么就相对于自身字体大小设置，如果自身没有字体大小设置，那么就相当于父元素进行设置。rem，em，vw，vh，vw属于前端开发除了px单位之外的另外几种单位取值；但是具体含义存在区别。px是像素单位，属于绝对单位，是一个具体的大小。陆荣涛前端学习交流Q群858752519。...

参与评论您还未登录，请先登录后发表或查看评论

CSS 中px、em、rem、%、vw、vh单位之间的区别详解

11-21

1 、px px就是pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率。 2、em 参考物是父元素的font-size，具有继承的特点。浏览器默认字体是16px，整个页面内1em不是一个固定的值。字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式，我们可以计算下： class为id1的div字体大小继承自父元素body：16px*1.5em = 24px class为id2的div字体大小继承自父元素id1：24px*1.5em = 36px class为id3的div字体大小继承自父元素id2：36px*1.5em = 54px 3、rem rem是CSS3新增的一

px、em、rem,vw区别介绍

qq_48763502的博客

12-31

1028

单位类型相对关系使用场景px绝对单位不受任何因素影响，固定的像素值。精确控制尺寸，图像、按钮等em相对单位相对于当前元素的字体大小。字体、间距的相对设置rem根相对单位相对于根元素 () 的字体大小。响应式设计，全局布局vw视口单位相对于视口宽度的百分比。响应式布局，动态调整px 是最直观和固定的单位，适用于精确的设计。em 和 rem 都是相对单位，但 rem 与根元素的字体大小绑定，避免了层级嵌套的复杂性。

px 、em 、rem、vh\vw的区别

最新发布

weixin_44478750的博客

07-08

166

em 相对像素，会继承父亲的字体大小，如果没有设置过大小，则默认浏览器像素大小16px，如果设置过了font-size=10px (16px*62.5%=10px),则1em=10px 1.2em=12px。但是最终的字体不能小于12px，比如font-size =20px 那么1rem=20px。px 表示像素，之所以认定为绝对因素是px的大小和元素属性与其他因素无关。vh vw 相对像素，根据页面大小分成100份， vh=页面高度的1% ，vw=页面宽度的 1%。绝对像素：px 、cm、 mm。

CSS中px/rem/em/vw/vh 的区别

大大大鸡腿的博客

08-04

777

说说 em/px/rem/vh/vw 区别

MINX_minx的博客

11-16

497

em/px/rem/vh/vw 都属于 css 的单位

CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】

橙-极纪元-JJYCheng

06-22

9548

CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】

浅析CSS中单位px、rem、em、vh、vw之间的区别

11-20

本文将深入探讨CSS中五个常用的长度单位：px、rem、em、vh和vw，以及它们之间的差异。 1. **像素单位px**：像素px是最基础的单位，它是一个固定的长度单位，类似于物理世界中的米或厘米。在屏幕上，1px代表显示器...

【高频考点精讲】CSS单位全解析：px、em、rem、vw/vh、%这些单位到底什么时候用？

全栈老李的博客

05-26

817

🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。今天咱们来聊聊CSS中那些让人又爱又恨的单位。作为前端工程师，每天都要和这些单位打交道，但你真的了解它们吗？px、em、rem、vw/vh、%这些单位，用对了事半功倍，用错了可能就要加班调样式了。（全栈老李友情提示）

rem、em、vh、px

accumulate_的博客

11-19

520

rem: rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。 em: 子元素字体大小的em是相对于父元素字体大小元素的width/height/padding/margin用em的话是相对于该元素的font-size vw/vh: 全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的话 vh 单位更好。 px: px像素（Pi

浅析rem和em和px vh vw和% 移动端长度单位

12-13

1.rem和em、px 首先来说说em和px的关系 em是指字体高度浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:65%; 这样em就成了16px*62.5=10em;这是显示在页面的字体大小是10px; 这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了, em的特点 em是个相对值他会根据父级元素的大小而变化但是如果嵌套了多个元素要计算它的大小,是件很头疼的事情这样的情况下,就出现了rem rem的区别在于它是相对于根基元素的,因此不会被它的父类影响到结

px、em、 rem、vh、vw 的区别

alpha_xiao的博客

03-11

6667

1、px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 2、em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 3、rem：相对长度单位。r’是“root”的缩写，相对于根元素<html>的字体大小。 4、vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。 5、vmin and vmax：关于视口高度和宽度两者的最小值或者最大值。 ...

em rem px vw vh用法

u012485291的专栏

10-28

773

px 像素，相对长度单位，相对于显示器屏幕分辨率而言 em相对长度单位，相对于当前对象内文本的字体大小；当前对象内的文字大小没有设置，则相对于浏览器的默认字体大小任意浏览器默认的字体高度是16px,所有未经调整的浏览器都符合1em=16px,为了简化 font-size的换算，需要在body选择器中声明font-size=62.5%,这样是的em的值变为16px*62.5%=10px;这样

em rem px区别以及vw vh

AiYa_He的博客

05-29

389

em rem px区别 px是固定的像素，一旦设置了就无法因为适应页面大小而改变。 em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。 em相对于父元素，rem相对于根元素。 em的特点： 1.子元素字体大小的em是相对于父元素字体大小。 2.子元素的width/height/padding/margin用em的话是相对于该父元素的font-size。 rem的特点： rem是全部的长度都相对于根元素—html元素。通常做法是给html元素设置一个字体大

CSS中的px、rem、em、vw/vh 总结

前端学习博客

01-16

1625

文章目录一.px1. 像素二.百分比(1)子元素height和width的百分比(2)top和bottom 、left和right(3)padding、margin(4)border-radius三.自适应场景下的rem解决方案四.通过vw/vh来实现自适应五.混合使用calc()语法一.px 在静态网页中，我们经常用像素（px）作为单位，来描述一个元素的宽高以及定位信息。在pc端，通常认为css中,1px所表示的真实长度是固定的。在pc端，字体通常为16px。 1. 像素像素是网页布局的基础，一个像

px em rem vh vw 区别

罗布泊丶镜像人的博客

05-27

349

px 固定像素值 em 根据父元素像素大小按照倍数关系从而得到像素值，如果父元素没有设定再找父父元素，最终找根元素 rem 根据根元素像素大小按照倍数关系获得像素值 vh 根据视窗高度百分比设定 vw 根据视窗宽度百分比设定 ...

css中px、em、rem、%、vw、vh、vm、rpx 这些单位的区别

qq_39951524的博客

10-22

1688

css中px、em、rem、%、vw、vh、vm、rpx 这些单位的区别

px、em、rem、%、vw、vh单位之间的区别？

人间清醒

03-21

3353

1.px px就是 pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率； 2.em 参考父元素的font-size,具有继承的特点。浏览器默认字体是16px, 整个页面内1em不是一个固定的值; 字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式，我们可以计算下： class为id1的div字体大小继承自父元素body： 16px*1.5em = 24px ...

px,em,rem,vh,vw,vmin和vmax的区别

Jack汪喆的技术分享栏

11-06

1092

css调整大小是前端工程师常做的事，下面将对px,em,rem,vh,vw,vmin和vmax进行简要讲述 1.px 像素单位，是显示屏上显示的每一个小点，为显示的最小单位，是一个绝对尺寸 2.em 相对值 1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。...