过去有4个你必须知道的CSS视口感知单元，它们适用于每一个可以想象的用例。然而，随着时间的流逝和时代的变迁，这4个视口单元现在不足以解决所有用例。因此，CSS提供了20个更大的视口单元来满足时代技术的发展需要。因此，一共24个viewportunit看似很多，但其实可以分解成6个mainviewportdevice，加上3个精准的辅助unit，可以实现24种组合。在本文中，我将逐一分解6个主要视口小部件和3个精度单位，以便您可以在所有情况下使用视口小部件。在最初的4个视口单位之前，CSS中的主要视口单位是vw、vh、vmin和vmax。您可能已经习惯使用这些单位，所以我的解释会很简短。vw:vw代表视口宽度，代表视口宽度的百分比。早于vw的范围是该周期的视口宽度。例如，如果你写10vw，那么这将构成视口宽度的10%的周期。视口只是屏幕比例的一个精心设计的短语，所以如果您使用的是宽度为1920像素的大型计算机设备，则10vw就是192像素。如果您使用的手机宽度为300像素，则10vw正好是30像素。vh：Vh代表视口高度，与vw完全一样，但代表的是高度值而不是宽度。这些小部件可以一起使用，使细节充满屏幕的整个长度。两个新的视口单元CSS一直在寻求从严格的顶部/底部、左/右、高度/宽度版本过渡到额外的动态开始/结束、块/内联版本。进行此修改的最重要原因是为了更容易在您的代码上执行非凡的编写指南。如果你的整个软件从水平书写路径切换到垂直书写路径，top/bottom或者width/height的概念并不总是表示相同的元素，因为如果你想要在你的Content上方和下方填充文本，这将被表示就像在垂直书写机中向左和向右填充，而不是向顶部和底部填充。这就是CSS带来vi和vb视口单元的原因。vi：vi代表ViewportInline，代表文档的行内方向。在水平书写方向上，这对应于视口的宽度，而在垂直书写方向上，这代表视口的高度。记住内联方向的一个简单方法是记住它与文本的方向相同。记住这一点的另一种方法是，如果您有两个相邻的内联元素（例如两个跨度），则它们堆叠的方向就是您的内联方向。VB：vb代表ViewportBlock，代表文件的块路径。这是vi的另一个，因此在水平写入路径中，它可以对应于视口的顶部，而在垂直文件中，它可以构成视口的宽度。如果您不想忘记单位，请不要忘记块路由将始终是块元素（例如实例div）将堆叠在另一个顶点之上的路由。视口单位修改器我们已经涵盖了6种主要类型的视口设备，但是，您可以将3种很棒的修改器上传到设备，使它们按比例缩放，同时您的视口可以以其他方式改变大小行为。例如，当您使用移动智能手机上网时，您会发现URL栏在您向下滚动时消失了。发生这种情况时，您的视口将在技术上修改长度，考虑到URL栏现在不占用您的视口的一部分。现代CSS设备没有任何方法来处理视口长度的这种变化，这就是添加这些修饰符的原因。这些修饰符是s、l和d。为了应用修饰符，您只需将修饰符放在品种之后和单位之前，例如10svw。这为6个视口单元中的每一个提供了四种通用混合模式：vwsvwlvwdvw。因此，我们在本文中保护的整个距离都没有使用完全有效的修饰符。当你不对一个单元操作任何修饰符时，包括10vw或10vh，浏览器通常会默认使用这三种修饰符中的一种，这主要完全基于浏览器的实现。S修饰符：s修饰符代表Small，代表最小的可行视口。在我们的celltelecellsmartphone实例中，这将是显示URL栏时视口的长度。如果将细节设置为100svh，它将占用100%的显示峰值，主要是显示URL栏时的显示大小。如果URL栏可见，则现在不再对其进行计数，或者当显示URL栏时，单元格不再始终基于可能的视口长度确定其长度。lModifier：lModifier代表Large，代表最大的可行视口。这里有很多s修饰符的替代品。在我们的Telecellsmartphone实例中，这将是不显示URL栏的视口的长度。如果你设置detail为100lvh，它会吸收100%的显示峰值，主要完全基于显示的比例，不显示URL栏。如果看到URL栏，它现在不再计数，或者如果URL栏不显示，这个单元将不再根据视口的长度计算它的长度，这意味着如果你将细节设置为100lvh并且地址栏正在显示从技术上讲，它会比显示器大。DModifierdModifier代表动态，代表当前视口长度。这是s和l修饰符的集合。在我们的移动示例中，这通常是当前视口的大小，无论是否显示URL栏。如果我们的URL栏显示，则d修饰符因s修饰符而相等，如果URL栏未显示，则d修饰符因l修饰符而相等。在显示和隐藏URL栏之间的转换期间，该单元将动态缩放大小，因此它始终填充所有可用空间。如果您需要保证元素始终根据视口调整大小，但它可能很费力，因为随着大小不断变化，它会导致大量重绘。结论虽然24个视口单元可能感觉很多，但将它们分成6个加3个修改器，您会发现一切都非常简单。然而，这些简单的组合为我们构建理想的CSS布局提供了强大的能量。我希望这些内容对您学习CSS有所帮助。
