vw, vh, em, rem 区别

已于 2024-09-18 10:24:36 修改
阅读量159 收藏
点赞数
文章标签： html css css3
于 2023-11-02 15:20:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65969505/article/details/134183307
版权

一、em

   em 是 父级字体大小的倍数，浏览器默认的 1em = 16px

   fontsize: 2em  (32px）

二、rem

   rem 是根元素的倍数，浏览器默认的 1em = 16px

   fontsize: 2rem  (32px）

   想要修改，需修改根元素 ，root

三、vw，vh

   屏幕可视区域的百分之多少，30vw，屏幕可视区域宽度的30%

一只小蜗 - lu
关注
前端css高频面试题——em/px/rem/vw/vh的区别？
weixin_47450807的博客
04-06 482
一、px px，表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大 小等同的，所以像素为计量单位被分在了绝对长度单位中。有些人会把px认为是相对 长度，原因在于在移动端中存在设备像素比，px实际显示的大小是不确定的。这里之 所以认为px为绝对单位，在于px的大小和元素的其他属性无关。 二、em em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺 寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）。为了简化 font-size 的换算，我们需
前端尺寸：vw vh rem em
qq_43569680的博客
08-17 451
前端尺寸：vw vh rem em vw和vh vw（Viewport Width）、vh(Viewport Height)是基于视图窗口的单位，是css3的一部分，基于视图窗口的单位，除了vw、vh还有vmin、vmax。 vw:1vw 等于视口宽度的1% Vh:1vh 等于视口高度的1% vmin: 选取 vw 和 vh 中最小的那个,即在手机竖屏时，1vmin=1vw vmax:选取 vw 和 vh 中最大的那个 ,即在手机竖屏时，1vmax=1vh 由于使用vw、vh依赖于视图窗口，故当屏幕分
em，rem，vh，vw的区别
weixin_45782763的博客
11-12 483
1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em 就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5 但是当 div 进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。 2.rem 这里的r就是 root 的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。 参照后面给的demo 3.vh vh就是当前屏幕可见高度的1%，也就是
rem，em，vw，vh，vm，%
Lyj的博客
03-18 595
Rem与em em:相对于父元素的字体大小的单位。 rem:相对于根元素（html）的字体大小的单位。 rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。 vw（view width） 相对于可视窗口的宽度。可视窗口被均分为100单位的vw。 vh（view height） 相对于可视窗口的高度。可视窗口被均分为100单位的vh。 ...
解密CSS单位：px、em、vh的区别与应用
最新发布
todoitbo的博客
04-09 2087
本文将深入探讨CSS中常用的单位px、em、vh的区别与应用场景。我们将详细解释这些单位的特点，以及在实际开发中如何选择合适的单位来实现设计需求。
前端中几个单位（em、rem、vh、vw）的区别
qq_30351747的博客
08-10 4198
1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5 但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。 2.rem 这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。 参照后面给的demo 3.vh vh就是当前屏幕可见高度的1%，也就是说 hei
CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】
橙-极纪元-cplvfx-JJY.Cheng
06-22 9215
CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】
视口单位(vw,vh,em,rem)的简单概述
weixin_71258678的博客
08-30 935
视口代表当前可见的计算机图形区域。在 Web 浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的 UI，菜单栏等——即指你正在浏览的文档的那一部分。概括地说，视口基本上是当前文档的可见部分。本文只是简单概述，方便大家更加理解~...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...
px、em、rem、%、vw、vh单位之间的区别
01-08
本文将详细介绍px、em、rem、%、vw和vh这六个单位的区别及其应用场景。 1. **px (像素)**：像素是绝对长度单位，代表显示器上的最小物理点。1px始终表示相同大小的点，不会随浏览器窗口或用户设置变化。它适用于...
03-px-em-rem-vw-vh-区别.md
03-31
### 知识点：CSS长度单位的使用与区别 前端开发中，CSS的长度单位是布局和样式设计的基础，对于前端工程师来说是必须掌握的核心知识点。这些单位决定了元素的尺寸、位置和其他相关样式特性。在面试中，对这些单位的...
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
热门推荐
Jin's blog
01-11 12万+
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
em,rem,vw,vh之间的区别
weixin_46953330的博客
03-16 2198
em em是相对长度单位，它是基于父元素的字体大小。 当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）。 如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值。 rem rem也是相对单位，但它相对的只是HTML根元素font-size的值。 vw，vh vw 就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度。 在pc端中，指的是浏览器的可视区域。 在移动
CSS度量单位rem、em、vw、vh详解
慕白博客
07-22 1万+
CSS度量单位rem、em、vw、vh详解 单位 说明 兼容性 em 相对长度单位，相对于当前对象内文本的字体尺寸， 根据父元素的大小变化而变化 良好 rem 相对长度单位，相对于跟元素（ 即 html 元素）font-size 的倍数， 不会被它的父元素影响 IE9+、火狐 3.6+、 safari5.0+ vw 相对于视口的宽度...
px、em、 rem、vh、vw 的区别
alpha_xiao的博客
03-11 6581
1、px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 2、em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 3、rem：相对长度单位。r’是“root”的缩写，相对于根元素<html>的字体大小。 4、vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。 5、vmin and vmax：关于视口高度和宽度两者的最小值或者最大值。 ...
弄清楚CSS单位px、em、rem、vh、vw、vmin、vmax的应用场景
张木期的博客
07-29 5489
1、px：绝对单位，页面按精确像素展示 2、em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:62.5%; 这样em就成了16px*62.5=10em;这是显示在页面的字体...
前端几种单位的比较
qxn_5266的博客
05-09 819
1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5 但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。 2.rem 这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字
px、em、rem、vh、vw的区别是什么？
前端小白菜
08-07 7389
px、em、rem、vh、vw
px、em、rem、%、vw、vh、vm这些单位的区别
weixin_42192534的博客
05-12 5万+
1.背景介绍我们为什么要选择合适的网页设计单位随着Web的发展，对新的解决方案的需求也会继续增大，对网页的要求更高。网页设计单位是涉及到我们布局的效果，使用不同的单位会对最终的demo，会有影响。现在都是要求响应式设计，需要适配各种设备，电脑，手机，平板。如果单位不合适，可能在这个设备显示良好，那个设备就会打乱布局。所以需要我们选择合适的单位来进行开发，设计。2.知识剖析1、pxpx就是pixel...
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、付费专栏及课程。

余额充值