css的viewport单位新增到了24个!

·  阅读 1339
css的viewport单位新增到了24个!

我正在参与掘金创作者训练营第5期,点击了解活动详情

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

本文将围绕六个主要视口单位和三个修饰符展开!那现在就让我们进入正题吧!

原始的四个视口单位

主要的 CSS 视口单位是vwvhvminvmax。您以前可能使用过或看过这些单位,所以我在解释它们时会尽量简短。

vwvh

vw代表视口宽度,代表视口宽度的百分比。放在前面的数字vw是这个长度将是视口宽度的百分比。例如,如果您写了10vw,那么这将代表视口宽度的 10% 的长度。 image.png

视口只是你屏幕大小的一个代名词,所以如果你在一个宽度为 1920 像素的大桌面上,它10vw代表 192 像素。如果您使用的是宽度为 300px 的手机,则10vw只有 30px。

vhvw概念完全相同,只不过代表它视口高度。这两个单元可以组合使用,以轻松地使元素填满屏幕的整个大小。

.fullScreen {
  width: 100vw;
  height: 100vh;
}
复制代码

vminvmax

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

.no-overflow {
  width: 100vmin;
  height: 100vmin;
}
复制代码

两个新的视口单位

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

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 InlineViewport Block概念会有所疑问?那么让我们先来熟悉一下这两个概念吧!

内联流

内联流的方向就是一行文本的书写方向(页面渲染一行文字的方向)。在英文文档中内内联流的方向是从左至右。如果你将网页页面语言更改为Arabic<html lang="ar">),内联流方向将变为从右至左。

QQ截图20220804215455.png

块流

块流指的是块排列的方向。例如有两个段落,块流动的方向就是从第一个块到第二个块。在英文文档中,块流动方向是从上到下。 QQ截图20220804213207.png

视口单位修饰符

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

这些修饰符是sld。为了使用修饰符,您只需将修饰符放在数字之后和单位之前,例如50svh。这为 6 个视口单元中的每一个提供了 4 个总组合。vhsvh,lvhdvh.

viewport_units-1024x576.png

到目前为止,我们在本文中介绍的所有内容都没有使用完全有效的修饰符。当您在单元上不使用修饰符时,例如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代表动态,代表当前视口大小。这就像sl修饰符的组合。在我们的手机示例中,无论 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选择单位svhsvw之间的最小值。

lvmin

单位lvmin选择单位lvhlvw之间的最小值。

dvmin

单位dvmin选择单位dvhdvw之间的最小值。

svmax

单位svmax选择单位svhsvw之间的最大值。

lvmax

单位lvmax选择单位lvhlvw之间的最大值。

dvmax

单位dvmax选择单位dvhdvw之间的最大值。

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 布局的强大能力。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改