百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

前端-CSS中的单位-PX, EM, REM, %, VW, VH啥区别

myzbx 2024-12-13 15:03 29 浏览

PX、EM、REM、%、VW 或 VH 这些CSS单位有什么区别?什么时候该用哪个?今天我们来了解一下。

让我们从基础开始,在CSS中,您可以使用各种度量单位指定元素的大小或长度,有些是绝对单位,有些是相对单位。

绝对单位:

PX:像素 (px) 被视为绝对单位,尽管它们与查看设备的 DPI 和分辨率有关。 但是在设备本身上,PX 单元是固定的,不会基于任何其他元素而改变。 对于响应式站点来说,使用 PX 可能会有问题,但它们对于保持某些元素的大小一致很有用。 如果您有不应该调整大小的元素,那么使用 PX 是一个不错的选择。

相对单位:

EM:相对于父元素
REM:相对于根元素(HTML 标签)
%:相对于父元素
VW:相对于视口的宽度
VH:相对于视口的高度
与 PX 不同,%、EM 和 REM 等相对单位更适合响应式设计。相对单位在不同的设备上可以更好地缩放,因为它们可以根据另一个元素的大小进行缩放。

让我们来看个例子

在大多数浏览器中,默认字体大小为 16 像素。 相对单位从这个基础计算大小。 如果您通过 CSS 为 HTML 标记设置基本尺寸来更改该基本尺寸,那么更改的尺寸将成为计算整个页面其余部分的相对单位的基础。 同样,如果用户调整了她的字体大小,那么这将成为计算相对单位的基础。那么在处理默认的 16px 时,这些单位是什么意思呢?

1em = 16px (1 * 16)
2em = 32px (2 * 16)
.5em = 8px (.5 * 16)


1rem = 16px
2rem = 32px
.5rem = 8px


100% = 16px
200% = 32px
50% = 8px

但是如果您或用户更改了默认大小怎么办? 因为这些是相对单位,所以最终尺寸值将基于新的基本尺寸。 虽然默认值为 16 像素,但如果您或用户将其更改为 14 像素,则计算出的尺寸最终将是:

1em = 14px (1 * 14)
2em = 28px (2 * 14)
.5em = 7px (.5 * 14)


1rem = 14px
2rem = 28px
.5rem = 7px


100% = 14px
200% = 28px
50% = 7px
这使用户可以自由调整其默认浏览器字体大小,同时仍保持您指定的每个元素的相对比例。

EM 和 REM有什么区别?

查看上面的图表,它显示 EM 和 REM 看起来完全一样。 那么它们有什么不同呢?

简而言之,它们因继承而异。 如前所述,REM 基于根元素 (HTML)。 然后,每个使用 REM 的子元素都将使用 HTML 根大小作为其计算点,而不管父元素是否指定了任何不同的大小。

另一方面,EM 基于父元素的字体大小。 如果父元素的大小与根元素的大小不同,则 EM 计算将基于父元素,而不是根元素。 这意味着使用 EM 进行大小调整的嵌套元素有时最终会达到您未预料到的大小。 另一方面,如果您需要它来指定页面特定区域的大小,它确实为您提供了更细粒度的控制。

看下面的例子,如果parent没有指定任何字体,那么,他们都将根据相同的字体来计算长度,所以所有rem em都相等。

而如果给parent设置了不同的字体大小,情况就不同了,em会根据新的字体大小计算长度。在parent外面的div不受影响,如下图。

什么是VW和VH?

虽然 PX、EM 和 REM 主要用于字体大小,但 %、VW 和 VH 主要用于边距、填充、间距和宽度/高度。

重申一下,VH 代表“视口高度”,即可视屏幕的高度。 100VH 表示视口高度的 100%,或屏幕的整个高度。当然,VW 代表“视口宽度”,即可视屏幕的宽度。 100VW 表示视口宽度的 100%,或屏幕的整个宽度。 % 反映了父元素大小的百分比,与视口的大小无关。

视口单位表示当前浏览器视口(当前浏览器大小)的百分比。虽然类似于 % 单位,但还是有区别的。 视口单位计算为浏览器当前视口大小的百分比。 另一方面,百分比单位计算为父元素的百分比,这可能与视口大小不同。

让我们考虑一个 480px x 800px 的移动屏幕视口示例。

1 VW = 视口宽度的 1%(或 4.8px)
50 VW = 视口宽度的 50%(或 240px)
1 VH = 视口高度的 1%(或 8px)
50 VH = 视口高度的 50%(或 400px)

如果视口大小发生变化,元素的大小也会相应变化。

结论:

什么时候改用什么单位呢?

归根结底,这个问题没有完美的答案。一般来说,通常最好选择相对单位之一而不是 PX,这样您的网页就有机会呈现出精美的响应式设计。但是,如果您需要确保元素永远不会在任何断点处调整大小并且无论用户是否选择了不同的默认大小都保持不变,请选择 PX。 PX 即使显示不理想,也能确保一致的结果。

EM 是相对于父元素的字体大小的,所以如果你想根据父元素的大小来缩放元素的大小,请使用 EM。

REM 是相对于根 (HTML) 字体大小的,因此如果您希望根据根大小缩放元素的大小,无论父大小是什么,都使用 REM。如果您使用过 EM,并且由于大量嵌套元素而发现大小问题,那么 REM 可能是更好的选择。

VW 对于创建填充整个视口宽度的全宽元素 (100%) 很有用。当然,您可以使用视口宽度的任何百分比来实现其他目标,例如一半宽度的 50VW 等。

VH 对于创建填充整个视口高度的全高元素 (100%) 很有用。当然,您可以使用视口高度的任意百分比来实现其他目标,例如一半高度的 50VH 等。

% 类似于 VW 和 VH,但它不是相对于视口宽度或高度的长度。相反,它是父元素宽度或高度的百分比。

相关推荐

砌体植筋拉拔试验检验值到底是6.0KN,还是10.2KN,如何计算确定

砌体拉结筋植筋养护完成后,需对所植钢筋进行拉拔试验,以检验植筋的锚固强度是否满足设计要求。检测时,按照一定的抽样比例进行拉拔试验。根据《混凝土结构后锚固技术规程》JGJ145-2013,以同品种、同...

柴油机功率如何计算?计算柴油机功率需要哪些参数?

在汽车领域,对于柴油机功率的计算是一项重要的工作,它有助于我们更好地了解柴油机的性能和适用场景。下面我们就来详细探讨一下柴油机功率的计算方法以及所需的参数。首先,我们要了解计算柴油机功率常用的公式。在...

变压器短路阻抗的作用和计算方法(变压器短路阻抗的作用和计算方法是什么)

变压器短路阻抗的作用和计算方法短路阻抗是在负载试验中测量的一项数据,它是二次侧短接并流过额定电流时,一次侧施加的电压与额定电压的的百分数。那么测量变压器的短路阻抗有什么意义呢?其实变压器的阻抗电压乃是...

9.35m层高高支模支撑架计算书(支模架多高属于高支模)

某工厂新扩建的建筑面积为1989.2m^2,建筑物总体分为2层,但局部为4层。建筑物檐高19.4m,建筑物总高23m。建筑物呈长方形设置,长度为48.20m,宽度为23.88m,结构形式为框架结构...

吊篮(悬挂装置前梁加长)安全复核计算书

吊篮(悬挂装置前梁加长)安全复核计算书一种超常规搭设的高处作业吊篮,因使用要求将吊篮悬挂装置前梁加长设置,本计算书针对这种工况的校核,以作参考。计算依据:1、《高处作业吊篮》GB/T19155-...

电功率计算公式精编汇总(电功率计算视频讲解)

一、电功率计算公式:1在纯直流电路中:P=UIP=I2RP=U2/R式中:P---电功率(W),U---电压(V),I----电流(A),R---电阻(Ω)。2在单相交流电路中:P=UIcosφ...

灌注桩承载力检测方法及步骤(灌注桩承载力不够怎么办)

检测灌注桩的承载力是确保基础工程安全可靠的关键环节,检测结果的精细能准确为我们提供可靠的数据,让我们能准确判断桩基础的承载力,方便后续施工安排,同样也能让我们根据数据分辨出有问题桩基,采取可靠有效的措...

很哇塞的体积计算方法:向量叉乘 很哇塞的体积计算方法

高中数学必看:向量叉乘,体积的神。大家都知道a、b的向量是什么意思,但是a、b的向量又是什么?很多同学都不知道,向量的向量在高中阶段非常有用,虽然它是大学的知识,在高中阶段可以干两件事。·第一件事,表...

施工升降机基础(设置在地库顶板回顶)计算书

施工升降机基础(设置在地库顶板回顶)计算书计算依据:1、《施工现场设施安全设计计算手册》谢建民编著2、《建筑地基基础设计规范》GB50007-20113、《混凝土结构设计标准》GB/T50010-2...

剪力墙水平钢筋根数如何计算?(剪力墙水平钢筋绑扎搭接规范)

剪力墙水平钢筋根数的计算需综合考虑墙高、起步距离、间距及构造要求等因素,具体步骤如下及依据:1.基本计算公式水平钢筋根数计算公式为:根数=(墙高-起步距离)/间距(墙高-起步距离)/间距...

直流电路常用计算公式(直流电路常用计算公式有哪些)

1、电阻导体阻碍电流通过的能力叫做电阻,用字母R表示,单位欧(Ω)。R=ρl/s式中R-导体的电阻,欧(Ω);ρ-导体的电阻率,欧·米(Ω·m);l-导体的长度,米(m);s-导体的截面积,平方米(m...

电气主电路图的绘制特点(电气原理图主电路)

1、电气主电路图中的电气设备、元件,如电源进线、变压器、隔离开关、断路器、熔断器、避雷器等都垂直绘制,而母线则水平绘制。电气主电路图除特殊情况外,几乎无一例外地画成单线图,并以母线为核心将各个项目(如...

中考总复习:物理专题 功和机械能 (功的计算、功率、动能、势能)

中考物理专题:功与机械能解析一、力学中的功——能量转化的桥梁功是力对物体能量变化的量度,需满足两要素:作用在物体上的力、物体沿力方向移动距离。例如推箱子时,若箱子未移动,推力不做功;若箱子滑动,推力做...

40亿QQ号,不超过1G内存,如何去重?

分享一道网上很火的面试题:40亿QQ号,不超过1G的内存,如何去重?这是一个非常经典的海量数据去重问题,并且做了内存限制,最多只能1GB,本文跟大家探讨一下~~一、常规思路我们日常开发中,如果谈到去重...

填充墙体拉结筋植筋深度、孔径、拉拔试验承载力计算!

今天分享下植筋间距及保护层要求:根据JGJ145-2013混凝土后锚固技术规程要求植筋与混凝土结构边缘不应小于5mm,植筋为两根及以上时水平间距为不应小于5d(d为钢筋直径)。根据混凝土结构后锚固技...