前端 - CSS 学习全部24种Viewports

发布日期：2022/8/26 9:57:14      浏览量：

CSS 过去只有四个你需要知道的视口单元，它们几乎可以涵盖所有可以想象的用例。 然而，随着时间的推移和技术的变化，这四个视口单元不再足以处理所有用例。 由于CSS 增加了 20 个视口单元，这听起来很多，但它们被分解为六个主要的视口单元，并带有三个独特的修饰符，总共有 24 种组合。

主要的4种视口单元

主要的 CSS 视口单位是 vw、VH、vmin 和 vmax。 您以前可能使用过或看过这些单位，所以我在解释它们时会尽量简短。

VW

vw 代表 Viewport Width，代表视口宽度的百分比。 放置在 vw 之前的数字是视口宽度的百分比。 例如，如果您写了 10vw，那么这将代表视口宽度的 10% 的长度。

视口代表你屏幕的大小，如果你在一个宽度为 1920 像素的大桌面上，10vw 将代表 192 像素。 如果您使用的是宽度为 300px 的手机，那么 10vw 将只有 30px。

VH

vh 代表视口高度，与 vw 完全相同，但它代表高度而不是宽度。 这两个单元可以组合使用，以轻松地使元素填满屏幕的整个大小。

VMIN 和 VMAX

vmin 和 vmax 表示最大和最小视口尺寸。 例如，如果您使用的是 300 像素宽和 800 像素高的手机，则 vmin 将代表视口的宽度，而 vmax 将代表设备的高度。 如果您需要根据屏幕的最小/最大尺寸调整元素的大小，这些单位非常有用。 例如，下面的 CSS 将创建一个尽可能大的正方形，而不会在任何方向溢出，因为它永远不会大于最小屏幕尺寸的 100%。

两个新的视口单位

CSS 一直在尝试从严格的顶部/底部、左/右、高度/宽度模型转变为更动态的开始/结束、块/内联模型。 此更改的主要原因是它可以让你更容易地采用不同的编写方向。 如果您的整个应用程序从水平书写方向切换到垂直书写方向，则顶部/底部或宽度/高度的概念不一定意味着相同的事情，因为如果您想在文本上方和下方添加填充，这将被表示 作为垂直书写系统中的左右填充，而不是填充顶部和底部。 这就是 CSS 添加 vi 和 VB 视口单元的原因。

VI

vi 代表 Viewport inline，代表文档的内联方向。 在水平书写方向上，这对应于视口的宽度，而在垂直书写方向上，这表示视口的高度。 记住 inline 方向的简单方法是记住它与文本的方向相同。 另一种记住这一点的方法是，如果您有两个彼此相邻的内联元素（例如两个跨度），那么它们堆叠的方向就是您的内联方向。

VB

vb 代表 Viewport Block，代表文档的块方向。 这与 vi 相反，因此在水平书写方向上，这将对应于视口高度，在垂直文档中，这将表示视口的宽度。 如果你很难记住这个单元，请记住块方向始终是块元素（例如两个 div）相互堆叠的方向。

视口单位修饰符

到目前为止，我们已经介绍了六种主要类型的视口单元，但是当您的视口可以改变大小时，您可以将三种不同的修改器添加到单元中以使它们表现不同。例如，当您在手机上浏览网页时，您可能会注意到向下滚动时 URL 栏会消失。发生这种情况时，您的视口在技术上会更改大小，因为现在 URL 栏不再占据您的视口的一部分。当前的 CSS 单元无法处理视口大小的这种变化，这就是添加这些修饰符的原因。

这些修饰符是 s、l 和 d。为了使用修饰符，您只需将修饰符放在数字之后和单位之前，例如 10svw。这为 6 个视口单元中的每一个提供了 4 个总组合。大众、svw、lvw 和 dvw。

到目前为止，我们在本文中介绍的所有内容都没有使用完全有效的修饰符。当您在单元上不使用修饰符时，例如 10vw 或 10vh，浏览器将自动默认使用基于浏览器实现的 3 个修饰符之一。

s修饰符

s 修饰符代表 Small 并表示可能的最小视口。 在我们的手机示例中，这将是显示 URL 栏时视口的大小。 如果您将一个元素设置为 100svh，它将占据屏幕高度的 100%，具体取决于显示 URL 栏时的屏幕大小。 URL 栏是否可见无关紧要，此单元将始终根据显示 URL 栏时的视口大小来确定其大小。

l修饰符

l 修饰符代表Large，代表最大可能的视口。 这几乎与 s 修饰符相反。 在我们的手机示例中，这将是没有显示 URL 栏时的视口大小。 如果您将元素设置为 100lvh，则当 URL 栏不显示时，它会根据屏幕大小占据屏幕高度的 100%。 URL 栏是否可见无关紧要，如果 URL 栏未显示，此单元将始终根据视口的大小确定其大小，这意味着如果您将元素设置为 100lvh 并且 URL 栏显示它在技术上将 比屏幕大。

d修饰符

d 修饰符代表动态，代表当前视口大小。 这就像 s 和 l 修饰符的组合。 在我们的手机示例中，无论 URL 栏是否显示，这始终是当前视口的大小。 如果我们的 URL 栏正在显示，则 d 修饰符与 s 修饰符大小相同，而如果 URL 栏未显示 d 修饰符与 l 修饰符大小相同。

在显示和隐藏 URL 栏之间的过渡期间，此单元将动态缩放大小，因此它始终会填满所有可用空间。 如果您需要确保元素始终根据视口调整大小，这很好，但可能会很费力，因为随着大小的不断变化，它会导致大量重绘。

浏览器支持

对于每一个很酷的 CSS 功能，您总是需要考虑浏览器支持，不幸的是，浏览器对这些新视口单元的支持不是很好。 目前，这些新单元的支持率为 15.2%，并且实际上仅在 Safari 和 Firefox 中得到支持。 缺乏支持的原因是该提案仍处于工作草案阶段，这意味着它还处于生命周期的早期阶段，距离成为官方 CSS 还很远。

结论

虽然 24 个单位可能听起来很多，但实际上只有 6 个单位和三个相对简单的修饰符。 然而，这些简单的组合给了我们构建完美 CSS 布局的强大能力。