❝
CSS 过去只有四个你需要知道的视口单元,它们几乎可以涵盖所有可以想象的用例。但是,随着时间的推移和技术的变化,这四个视口单元不再足以处理所有用例。由于这个原因 CSS 增加了 20 个视口单元,这听起来很多,但它们被分解为六个主要的视口单元,并带有三个独特的修饰符,总共有 24 种组合。
本文将围绕六个主要视口单元和三个修饰符展开!那现在就让我们进入正题吧!
❞
原始的四个视口单位
主要的 CSS 视口单位是vw
、vh
、vmin
和vmax
。您以前可能使用过或看过这些单位,所以我在解释它们时会尽量简短。
vw
和vh
vw
代表_视口宽度_,代表视口宽度的百分比。放在前面的数字vw
是这个长度将是视口宽度的百分比。例如,如果您写了10vw
,那么这将代表视口宽度的 10% 的长度。
视口只是你屏幕大小的一个代名词,所以如果你在一个宽度为 1920 像素的大桌面上,它10vw
代表 192 像素。如果您使用的是宽度为 300px 的手机,则10vw
只有 30px。
vh
与vw
概念完全相同,只不过代表它视口高度。这两个单元可以组合使用,以轻松地使元素填满屏幕的整个大小。
.fullScreen {
width: 100vw;
height: 100vh;
}
vmin
和vmax
vmin
并vmax
表示最大和最小视口尺寸。例如,如果您使用的是 300 像素宽和 800 像素高的手机,则vmin
表示视口的宽度,vmax
表示设备的高度。如果您需要根据屏幕的最小/最大尺寸调整元素的大小,这些单位非常有用。例如,下面的 CSS 将创建一个尽可能大的正方形,而不会在任何方向溢出,因为它永远不会大于最小屏幕尺寸的 100%。
.no-overflow {
width: 100vmin;
height: 100vmin;
}
两个新的视口单位
CSS 一直在尝试从严格的顶部/底部、左/右、高度/宽度模型转变为更动态的开始/结束、块/内联模型。此更改的主要原因是更容易在您的代码中采用不同的编写方向。如果您的整个应用程序从水平书写方向切换到垂直书写方向,则顶部/底部或宽度/高度的概念不一定意味着相同的事情,因为如果您想在文本上方和下方添加填充,这将被表示作为垂直书写系统中的左右填充,而不是填充顶部和底部。这就是 CSS 添加vi
和vb
视口单元的原因。
vi
vi
代表_Viewport Inline_,代表文档的内联方向。在水平书写方向上,这对应于视口的宽度,而在垂直书写方向上,这表示视口的高度。记住 inline 方向的简单方法是记住它与文本的方向相同。另一种记住这一点的方法是,如果您有两个彼此相邻的内联元素(例如两个跨度),那么它们堆叠的方向就是您的内联方向。
.box1 {
width: 50vi; /* 等价于50vw */
height: 50vb; /* 等价于50vh */
}
QQ截图20220804221059.png
vb
vb
代表_Viewport block_,代表文档的块方向。这与vi
水平书写方向相反,这将对应于视口高度,而在垂直文档中,这将表示视口的宽度。如果你很难记住这个单元,请记住块方向始终是块元素(例如两个 div)相互堆叠的方向。
.box1 {
writing-mode: vertical-lr;
width: 50vi; /* 等价于50vh */
height: 50vb; /* 等价于50vw */
}
QQ截图20220804221412.png
内联流和块流
可能您对上面说的这两个_Viewport Inline_和_Viewport Block_概念会有所疑问?那么让我们先来熟悉一下这两个概念吧!
内联流
内联流_的方向就是一行文本的书写方向(页面渲染一行文字的方向)。在英文文档中内内联流的方向是从左至右。如果你将网页页面语言更改为_Arabic(<html lang="ar">
),内联流方向将变为从右至左。
QQ截图20220804215455.png
块流
_块流_指的是块排列的方向。例如有两个段落,块流动的方向就是从第一个块到第二个块。在英文文档中,块流动方向是从上到下。
视口单位修饰符
到目前为止,我们已经介绍了六种主要类型的视口单元,但是当您的视口可以改变大小时,您可以将三种不同的修改器添加到单元中以使它们表现不同。例如,当您在手机上浏览网页时,您可能会注意到向下滚动时 URL 栏会消失。发生这种情况时,您的视口在技术上会更改大小,因为现在 URL 栏不再占据您的视口的一部分。当前的 CSS 单元无法处理视口大小的这种变化,这就是添加这些修饰符的原因。
这些修饰符是s
、l
和d
。为了使用修饰符,您只需将修饰符放在数字之后和单位之前,例如50svh
。这为 6 个视口单元中的每一个提供了 4 个总组合。vh
, svh
,lvh
和dvh
.
viewport_units-1024x576.png
到目前为止,我们在本文中介绍的所有内容都没有使用完全有效的修饰符。当您在单元上不使用修饰符时,例如10vw
or 10vh
,浏览器将自动默认使用基于浏览器实现的 3 个修饰符之一。
s
修饰符
s
修改器代表_Small_并表示可能的最小视口。在我们的手机示例中,这将是显示 URL 栏时视口的大小。如果您设置一个元素,100svh
它将占据屏幕高度的 100%,具体取决于显示 URL 栏时的屏幕大小。URL 栏是否可见无关紧要,此单元将始终根据显示 URL 栏时的视口大小来确定其大小。
l
修饰符
修改器l
代表_Large_,代表最大可能的视口。与s
修饰符几乎相反。在我们的手机示例中,这将是未显示 URL 栏时的视口**「大小」。如果你设置一个元素,当 URL 栏「不」100lvh
显示时,它会根据屏幕的大小占据屏幕高度的 100% 。URL 栏是否可见无关紧要,如果 URL 栏未显示,此单元的大小将始终基于视口的大小,「这」**意味着如果您将元素设置为并且 URL 栏正在显示,从技术上讲,它将是比屏幕大。100lvh
d
修饰符
修改器d
代表_动态_,代表当前视口大小。这就像s
和l
修饰符的组合。在我们的手机示例中,无论 URL 栏是否显示,这始终是当前视口的大小。如果我们的 URL 栏正在显示,则d
修饰符与修饰符的大小相同s
,而如果 URL 栏未**「显示」**修饰符,d
则修饰符与修饰符的大小相同l
。
在显示和隐藏 URL 栏之间的过渡期间,此单元将动态缩放大小,因此它始终会填满所有可用空间。如果您需要确保元素始终根据视口调整大小,这很好,但可能会很费力,因为随着大小的不断变化,它会导致大量重绘。
新的 CSS 视口单元概述
svh
单位svh反映了用户可见的最小可能视口高度。最小可能的视口高度不包括用户代理的所有界面元素。 默认情况下,**「vh」**单元包括移动浏览器附带的地址栏。
lvh
单位lvh
反映了用户可见的最大可能视口高度。
dvh
单位dvh
反映当前视口高度。[与单元vh]不同,该单元不包括用户代理的界面,并随着当前视口高度的变化而更新。
单位dvh
反映了用户代理的界面当前占用了多少垂直视口高度。例如,当您在移动设备上向下滚动页面时,这将发生变化,因为移动 URL 栏会移出您的屏幕。
svw
单位svw
反映了用户可见的最小视口宽度。这个单位的值是静态的,所以如果当前视口的宽度改变它不会改变。
lvw
单位lvw
反映用户可见的最大可能视口宽度。和单位 svw 一样,这个单位的值是静态的,不会改变。
dvw
单位dvw
反映用户可见的当前视口宽度。该值是动态的,因此将根据当前视口宽度而变化。
svmin
单位svmin
选择单位svh
和svw
之间的最小值。
lvmin
单位lvmin
选择单位lvh
和lvw
之间的最小值。
svmax
单位svmax
选择单位svh
和svw
之间的最大值。
lvmax
单位lvmax
选择单位lvh
和lvw
之间的最大值。
vi
单位vi
是指视口在行内方向上的大小。对于典型的英文文本,行内方向是指宽度;从左到右书写。但是,对于典型的中文文本布局,行内方向是指高度;从上到下写。
svi
单位svi
是指视口在行内方向上可能的最小尺寸。
lvi
单位lvi
是指视口在行内方向上可能的最大尺寸。
dvi
单位dvi
指的是视口在行内方向上当前可能的大小。
vb
单位vb
是指视口在块方向上的大小。对于典型的英文文本,块方向是指高度;线条从上到下环绕。对于典型的中文文本,块方向是指宽度;从右到左换行。
svb
单位svb
是指视口在块方向上的最小可能尺寸
lvb
单位lvb
是指视口在块方向上可能的最大尺寸。
dvb
单位dvb
指的是视口在块方向上当前可能的大小。
浏览器支持
对于每一个很酷的 CSS 功能,您总是必须考虑浏览器支持,不幸的是,浏览器对这些新视口单元的支持不是很好。目前,这些新单位只有16.3% 的支持率,实际上只支持 Safari 和 Firefox。缺乏支持的原因是该提案仍处于工作草案阶段,这意味着它还处于其生命周期的早期阶段,距离成为官方 CSS 还很远。
结论
虽然 24 个单位可能听起来很多,但实际上只有 6 个单位和三个相对简单的修饰符。然而,这些简单的组合给了我们构建完美 CSS 布局的强大能力。