CSS尺寸单位px、em、rem、vw、vh以及%的区别

最新推荐文章于 2025-03-17 17:51:38 发布
最新推荐文章于 2025-03-17 17:51:38 发布
阅读量504 收藏 1
点赞数 2
分类专栏： CSS 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gua551100gua/article/details/133560973
版权

1. px

px是像素单位。它是代表显示器上每一个显示的像素点，根据用户屏幕显示器的分辨率决定。

2. em

em为相对单位，相对于当前元素内文本的字体尺寸。如果当前元素没有指定字体尺寸，那么以浏览器默认的字体尺寸为准。

例如，当前元素设置了字体尺寸为24px，那么2em就代表48px。

3. rem

rem为相对单位，相对于<HTML>元素文本的字体尺寸。如果<HTML>元素没有指定字体尺寸，那么以浏览器默认的字体尺寸为准。

例如，<HTML>元素设置了字体尺寸为24px，那么2rem就代表48px。

4. vw和vh

vw和vh是相对单位，相对于当前视口。

例如，10vw代表当前视口宽度的10%，20vh代表当前视口高度的20%。

5. %

%是相对单位，相对于父元素的相关尺寸。

例如，父元素设置了height: 100px，那么它的子元素height: 50%就代表50px。

浅析rem和em和px vh vw和% 移动端长度单位
09-24
移动端开发中的长度单位主要有以下几种：px、em、rem、vh、vw和%。它们各自的特点和用途不同，在移动端开发中扮演着重要的角色。 首先来聊聊em单位。em是一个相对单位，它指的是当前字体的字号大小。浏览器默认字体...
px、em、rem、%、vw、vh单位之间的区别
01-08
本文将详细介绍px、em、rem、%、vw和vh这六个单位的区别及其应用场景。 1. **px (像素)**：像素是绝对长度单位，代表显示器上的最小物理点。1px始终表示相同大小的点，不会随浏览器窗口或用户设置变化。它适用于...
【css单位】
m0_75151863的博客
11-28 405
em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字 体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小因此并不是一。px 像素（Pixel）。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位。
css样式中的vw什么意思,css vw是什么单位
weixin_39587010的博客
08-03 1268
在css中，vw是一个长度单位，一个视口单位，是指相对于视口的宽度；视口会被均分为100单位的vw，则1vw等于视口宽度的1%，比如浏览器的宽度为1920px，则“1vw=1920px/100=19.2px”。(推荐教程：CSS视频教程)视口单位(Viewport units)什么是视口？在PC端，视口指的是在PC端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewpor...
CSS尺寸单位终极指南：精准区分与选择px/vw/em等单位
Lew269的博客
03-17 1882
你是否曾在响应式布局中遭遇元素错位的困扰？是否对px、vw、rem、dvh等CSS单位的选择犹豫不决？本文将为你揭晓前端开发中最易被忽视的"度量密码"！从物理像素到动态视口，从印刷单位到容器查询，我们不仅深入解析多种核心CSS单位的特性差异，更提供可直接复用的"黄金组合策略"。无论是要实现精准还原的设计稿，还是要打造跨设备的自适应界面，这篇文章都将成为你样式编码的终极指南！
CSS中的vw单位
qiaokelibangwo的博客
05-18 1200
vw就是视口的宽度，vw 是个相对单位。 不管在什么尺寸的屏幕下， vw都把屏幕分为平均的 100等份。 1vw = 1 / 100 屏幕的宽度 （1vh= 1 / 100 屏幕的高度 ） width: 1vw和width: 1% 没有区别 vw 永远是以视口的宽度为准。· 在 375设计稿下， 1vw 永远是 3.75px 而百分比以父盒子为准。 假如父盒子是 200px，则 1% 是 2p px 转为vw 在标准移动端设计稿中宽度是 375px， vw 把屏幕划分了100等份，..
vw单位——CSS
mantou_riji的博客
04-19 2622
文章目录vw的引入vw补充：2倍图px和vw的转换 vw的引入 不同的设备完美视口的大小是不一样的，eg： iphone6 – 375 iphone6plus – 414 由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样，比如在iphone6中375就是全屏，而到了plus中375就会缺一块，不能适配所有移动设备。 所以在移动端开发时，就不能再使用px来进行布局了，这就引入了vw。 vw vw表示的是视口的宽度（viewport width)。 视口就是当前窗口所显示的css像
vw css什么单位,CSS vw单位
weixin_32612253的博客
08-04 489
vw单位vw是css的一个属性，和px，rem等类似，属于长度单位。在浏览器中， 1 vw = viewport 的宽度 /100根据这个特性，vw 可以帮助我们实现移动端自适应布局，其优点在于所见即所得，甚至优于rem，因为完全不用使用额外的计算。推荐和sass、less这种css预处理语言一起使用，因为其可以定义变量及函数，会在使用vw上提供巨大帮助。@vv:7.5vw;.circle{wid...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...
浅析CSS中单位px、rem、em、vh、vw之间的区别
11-20
本文将深入探讨CSS中五个常用的长度单位：px、rem、em、vh和vw，以及它们之间的差异。 1. **像素单位px**： 像素px是最基础的单位，它是一个固定的长度单位，类似于物理世界中的米或厘米。在屏幕上，1px代表显示器...
css中vw单位怎么用
浪漫韫秋
08-03 546
使用百分比（%）或Flexbox、Grid等现代CSS布局技术可能是更好的选择，使用 100vw 作为宽度可能会导致一些布局问题，这种方法在滚动条总是可见的情况下工作得最好；同时避免了与视口宽度单位相关的一些潜在问题。那么滚动条可能会覆盖在页面内容的一部分上，如果你的元素宽度设置为 100vw，因为它们提供了更多的灵活性和适应性，（这里的 10px 是一个示例值，（通常是浏览器窗口）的宽度相同。（如默认在大多数现代浏览器中），1vw 等于视口宽度的1%。来稍微减少元素的宽度，以触发滚动条的出现，
CSS长度单位：vh、vw、vmin、vmax、em、rem、ex、ch、px
李豆豆的博客
04-28 8954
CSS的长度单位。 一些属性可能允许有负长度值，或者有一定的范围限制。如果不支持负长度值，那应该变换到能够被支持的最近的一个长度值。 长度单位包括包括：相对单位和绝对单位。 相对长度单位包括有： em, ex, ch, rem, vw, vh, vmax, vmin 绝对长度单位包括有： cm, mm, q, in, pt, pc, px 1、vh、vw 有点像width和heig
css 尺寸单位（px，%，em，rem，vh，vw）的区别及应用场景
imcholl的博客
06-17 3712
em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸特点：   1. em的值并不是固定的   2. em会继承父级元素的字体大小场景使用：为了字体大小的可维护性和伸缩性，推荐使用em，如果存在3层以及3层以上的字体相对尺寸的设置，可以考虑使用rem。vw：表示视口的宽度，我们把视口分成100份，1vw就表示当前视口宽度的百分之一；vh：表示视口的高度，1vh就表示当前视口高度的百分之一；vmin：表示在vw与vh
CSS新单位vw,vh在响应式设计中的应用
wang252949的博客
12-08 1164
css样式中的vw什么意思,css中vw是什么意思？
weixin_42121086的博客
08-03 6445
在css中，vw是一种视窗单位，也是相对单位。相对于视口的宽度，视口被均分为100单位的vw。在css中，vw是一种视窗单位，也是相对单位。相对于视口的宽度，视口被均分为100单位的vw。下面本篇文章就来给大家介绍一下，希望对大家有所帮助。CSS 单位是一种量度单位，包括尺寸单位和颜色单位。我们常使用向对单位，不会使得网页在不同的视图下造成布局混乱的情况。vw是Viewport's width的缩...
CSS中的常见单位（px,%,em,rem,vw,vh)
just4you的博客
10-31 1098
像素(px)&百分比(%) 像素(Pixel) 长度单位，相对于显示器屏幕分辨率而言，通常在不定义显示缩放比例的情况下，1px对应显示器屏幕上的一个像素点。 早年的pc端展示的页面基本都用这个单位。 百分比(%) 相对长度单位，指占用的父元素宽度/高度的比例。 当指定为100%时，会占据父元素的全部宽度或高度； 也可以指定大于100%的数值，这时，子元素会超出父元素的边界。 EM&REM 这两个都是相对长度单位。区别在于： EM是相对于父元素 REM是相对于根元素。REM中的“R”
关于css3单位 vw vh vmin vmax
weixin_30247781的博客
05-26 119
　　昨晚头儿让我研究一下viewport units:vw,vh,vmin vmax 用于移动端的利弊。我才知道还有这种单位的存在... 　　现在总结一下： 　　第一点：vw是相对是屏幕宽度的，比如50vw=屏幕宽度的50%,跟百分比有点像 　　第二点：vh是相对屏幕高度的，比如50vh=屏幕高度的50%； 　　第三点：vmin 是取宽高中最小的值为标准 vmax同理 　　注...
css3自适应布局单位vw,vh详解
zgphacker2010的专栏
07-29 444
视口单位(Viewport units) 什么是视口？ 在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。 视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport,“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight..
vw vh
qq_40774743的博客
08-23 478
1，vw、vh、vmin、vmax 的含义 （1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。   （2）具体描述如下： vw：视窗宽度的百分比（1vw 代表...
rem和em和px vh vw和% 移动端长度单位
最新发布
04-03
### 移动端开发中的长度单位及其区别 #### 一、基本概念 在移动端开发中，不同的长度单位具有各自的特点和适用场景。以下是 `rem`、`em`、`px`、`vh`、`vw` 和 `%` 的定义： - **Rem**: 基准点为根元素 `<html>` 的字体大小，始终相对于文档的根元素计算尺寸[^3]。 - **Em**: 相对于其父节点的字体大小来计算尺寸。如果未指定，则基于浏览器默认字体大小 (通常是 16px)[^4]。 - **Px**: 是一种绝对长度单位，在屏幕上的表现固定不变，不随其他因素变化而改变[^1]。 - **Vh/Vw**: 分别表示视口高度和宽度的百分之一。例如，`1vh` 表示视口高度的 1%，`1vw` 则代表视口宽度的 1%。 - **Percent (%)**: 百分比是一种相对单位，通常用于相对于容器的宽高或其他属性的比例设定。 --- #### 二、具体差异分析 ##### 1. Rem vs Em 两者均为相对单位，但它们的主要区别在于参照物的不同： - `em`: 参照的是最近父级元素的字体大小，容易受到嵌套层次的影响，可能导致复杂布局下的不可预测性[^2]。 - `rem`: 总是依据 HTML 文档根元素 (`<html>`) 的字体大小，因此更加稳定且易于维护。 ##### 2. Px 对比 Relative Units 像素是一个固定的物理单位，无论设备如何它都不会发生变化；然而，响应式设计提倡使用灵活可变的单位以适应多种分辨率需求。相比而言，`rem`, `em`, `vh/vw` 能够更好地满足跨屏适配的要求。 ##### 3. Vh & Vw 特殊用途 这些单位特别适合创建全屏覆盖效果或者动态调整组件大小的应用场合。比如实现图片轮播器的高度自适应等功能时非常有用。 ##### 4. Percent (%) 主要用于子元素相对于父元素某些维度比例关系的确立上。当涉及到复杂的网格系统构建或是流体布局规划的时候尤为常见。 --- #### 三、最佳实践建议 为了提高用户体验并简化样式管理流程，在实际项目操作过程中可以遵循如下原则： - 尽量采用 `rem` 来代替传统的 `px` 定义文字及其他UI控件的基础尺度，因为前者能更方便地通过修改全局变量统一控制整个网站风格的一致性和缩放行为。 - 如果需要局部微调某部分区域内的子项间距或边距等细节参数，可以选择利用 `em` 单位完成相应处理工作，因为它会自动跟随上级设定做出同步变动从而减少额外配置负担。 - 当遇到涉及屏幕整体范围的操作任务如背景图填充、弹窗定位等情况之下优先考虑运用 `vh`/`vw` 类型指令达成目标效果。 - 关于百分比率方面的应用则多见于弹性盒子模型(Flexbox)以及栅格化框架结构之中用来分配空间份额等问题解决之上。 --- ```css /* 示例代码 */ :root { --base-font-size: 16px; } body { font-size: var(--base-font-size); /* 设置基础字号 */ } .container { width: 80%; /* 使用百分比设置宽度 */ padding: 2rem; /* 使用 rem 设定内边距 */ } .item { margin-bottom: 1em; /* 使用 em 添加底部外边距 */ height: 50vh; /* 让元素占据一半视口高度 */ } ``` --- ###
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值