过去css 有 4 个你必须知道的识别视窗口的单位，并且它们能够很好地处理每个可以想象的用例。然而，随着时间的推移和时代的变化，这 4 种视口单位现在不足以解决所有用例。于是，CSS 提供了 20 个更大的视窗口单位，以适应时代技术的发展需要，因此，总共为24个视窗单位，看起来感觉很多，但是，它们可能被分解为 6 个主要的视口设备，并带有 3 个精确的辅助单位，从而实现了 24 种组合。

在本文中，我会分解为6个主要视口小工具和 3 个精准单位中的每一个，以便你可以在所有情况下使用视口小工具。

原始的4个视口单位

之前CSS 的主要视窗口单位有 vw、vh、vmin 和 vmax。你可能已经习惯使用这些单位，因此，我将在解释它们时尽量简短。

vw 代表视口宽度，代表视口宽度的百分比。比 vw 更早的范围是这个时期的视口宽度。

例如，如果你写了 10vw，那么，这将构成视口宽度的 10% 的周期。

视口只是屏幕比例的一个精心设计的短语，因此，如果你使用的是宽度为 1920 像素的大型计算机设备，则 10vw 就是 192 像素。

如果你使用的是宽度为 300 像素的手机，那么 10vw 刚好是 30 像素。

Vh 代表视口高度，与 vw 完全相同，但代表高度值而不是宽度。这些小工具可以一起使用，以使细节填满屏幕的整个长度。

两个新的视口单位

CSS 一直在寻求从严格的顶部/底部、左/右、高度/宽度版本过渡到一个额外的动态开始/结束、块/内联版本。进行此修改的最重要原因是降低对你的代码执行非凡的编写指南的难度。

如果你的整个软件从水平写入路径切换到垂直写入路径，那么顶部/底部或宽度/高度的概念并不总是意味着相同的元素，因为如果你希望在你的上方和下方添加填充文本内容这将被表示为在垂直书写机器中向左和向右的填充，而不是填充顶点和底部。这就是 CSS 带来 vi 和 vb 视口单元的原因。

vi 代表 Viewport Inline，代表文档的内联方向。在水平书写方向上，这对应于视口的宽度，而在垂直书写方向上，这表示视口的高度。

记住 inline 方向的简单方法是记住它与文本的方向相同。另一种记住这一点的方法是，如果你有两个彼此相邻的内联元素（例如两个跨度），那么它们堆叠的方向就是你的内联方向。

vb 代表 Viewport Block，代表文件的块路径。这是 vi 的另一个，因此在水平写入路径中，这可以对应于视口顶部，而在垂直文件中，这可以构成视口的宽度。

如果你不想忘记这个单元，请不要忘记块路由将始终是块元素（作为实例 div）将堆叠在另一个顶点上的路由。

视口单位修改器

因此，我们已经涵盖了6种主要类型的视口设备，但是，你可以将 3 种出色的修改器上传到设备上，以使它们在你的视口可以改变大小的同时以其他方式表现。

例如，当你使用蜂窝智能手机上网时，你可以观察到 URL 栏会在你向下滚动时消失。当这种情况发生时，你的视口在技术上会修改长度，考虑到现在 URL 栏现在不占用你的视口的一部分。现代 CSS 设备没有任何方式来应对视口长度的这种变化，这就是添加这些修饰符的原因。

这些修饰符是 s、l 和 d。为了应用修改器，你只需要将修改器放在品种之后且早于 10svw 之类的单位。这为 6 个视口单元中的每一个提供了四种通用混合模式：

•  vw
•  svw
•  lvw
•  dvw.

因此，我们在本文中保护的整个距离都没有使用完全有效的修饰符。当你在单元上不操作任何修饰符时，包括 10vw 或 10vh，浏览器通常会默认使用三个修饰符之一，主要完全基于浏览器的实现。

S Modifier:

s 修饰符代表 Small 并且代表最小的可行视口。在我们的 cell telecellsmartphone 实例中，这将是显示 URL 栏时视口的长度。如果你将细节设置为 100svh，它将占据显示峰值的 100%，这主要完全取决于显示 URL 栏时的显示尺寸。如果看到 URL 栏，它现在不再计算，或者现在该单元不再将其长度始终基于 URL 栏显示时可能的视口长度。

l Modifier:

l Modifier代表Large，代表最大的可行视口。这是 s 修饰符的很多替代品。在我们的蜂窝 Telecellsmartphone 实例中，这将是视口的长度，而 URL 栏不显示。如果你将细节设置为 100lvh，它将吸收 100% 的显示峰值，主要完全基于显示的比例，而 URL 栏不显示。如果看到 URL 栏，它现在不再计数，或者如果 URL 栏不显示，这个单元将不再根据视口的长度持续计算它的长度，这意味着如果您将细节设置为 100lvh 并且 URL条正在显示它在技术上将比显示器大。

D Modifier

d Modifier代表动态，代表当前视口长度。这是 s 和 l 修饰符的集合。在我们的手机实例中，这通常是当前视口的尺寸，无论 URL 栏是否显示。如果我们的 URL 栏正在显示，则 d 修饰符是等长的，因为 s 修饰符，而如果 URL 栏没有显示，d 修饰符是等长的，因为 l 修饰符。

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

虽然 24 个视口单位，可能感觉很多，但把它们拆分为 6 个加 3 个修饰符的话，你就会觉得这一切都非常简单。然而，这些简单的组合为我们构建理想的 CSS 布局提供了强大的能量，希望这个内容对你学习CSS有所帮助。

来源： web前端开发

链接: https://www.fly63.com/article/detial/12072