css的viewport单位新增到了24个！
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 */
}
vb
vb代表Viewport block，代表文档的块方向。这与vi水平书写方向相反，这将对应于视口高度，而在垂直文档中，这将表示视口的宽度。如果你很难记住这个单元，请记住块方向始终是块元素（例如两个 div）相互堆叠的方向。
.box1 {
writing-mode: vertical-lr;
width: 50vi; /* 等价于50vh */
height: 50vb; /* 等价于50vw */
}
内联流和块流
可能您对上面说的这两个Viewport Inline和Viewport Block概念会有所疑问？那么让我们先来熟悉一下这两个概念吧！
内联流
内联流的方向就是一行文本的书写方向（页面渲染一行文字的方向）。在英文文档中内内联流的方向是从左至右。如果你将网页页面语言更改为Arabic（<html lang="ar">），内联流方向将变为从右至左。
块流
块流指的是块排列的方向。例如有两个段落，块流动的方向就是从第一个块到第二个块。在英文文档中，块流动方向是从上到下。
视口单位修饰符
到目前为止，我们已经介绍了六种主要类型的视口单元，但是当您的视口可以改变大小时，您可以将三种不同的修改器添加到单元中以使它们表现不同。例如，当您在手机上浏览网页时，您可能会注意到向下滚动时 URL 栏会消失。发生这种情况时，您的视口在技术上会更改大小，因为现在 URL 栏不再占据您的视口的一部分。当前的 CSS 单元无法处理视口大小的这种变化，这就是添加这些修饰符的原因。
这些修饰符是s、l和d。为了使用修饰符，您只需将修饰符放在数字之后和单位之前，例如50svh。这为 6 个视口单元中的每一个提供了 4 个总组合。vh, svh,lvh和dvh.
到目前为止，我们在本文中介绍的所有内容都没有使用完全有效的修饰符。当您在单元上不使用修饰符时，例如10vwor 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之间的最小值。
dvmin
单位dvmin选择单位dvh和dvw之间的最小值。
svmax
单位svmax选择单位svh和svw之间的最大值。
lvmax
单位lvmax选择单位lvh和lvw之间的最大值。
dvmax
单位dvmax选择单位dvh和dvw之间的最大值。
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 布局的强大能力。
转载自:https://juejin.cn/post/7128278005654241311