乐趣区

关于前端:vh-存在问题试试动态视口单位之-dvhsvhlvh

jiezi

大部分同学都晓得，在 CSS 世界中，有 vw、vh、vmax、vmin 这几个与视口 Viewport 相干的单位。

失常而言：

  1. 1vw 等于 1 /100 的视口宽度（Viewport Width）
  2. 1vh 等于 1 /100 的视口高度（Viewport Height）
  3. vmin — vmin 的值是以后 vw 和 vh 中较小的值
  4. vmax — vw 和 vh 中较大的值

vh 在挪动端存在重大问题！

然而，在挪动端，状况就不太一样了。100vh 不总是等于一屏幕的高度。有的时候，100vh 高度会呈现滚动条。

能够应用挪动端 Chrome 浏览器扫描上面的二维码查看理论 100vh 在挪动端的体现：

根因在于：

  1. 很多浏览器，在计算 100vh 的高度的时候，会把地址栏等相干控件的高度计算在内 2
  2. 同时，很多时候，因为会弹出软键盘等操作，在弹出的过程中，100vh 的计算值并不会实时发生变化！

这也就变相导致了许多基于 100vh 想实现的成果无形中会产生很多问题。

图片来源于：The large, small, and dynamic viewport units

新视口相干单位之 lvh、svh、dvh

为了解决上述的问题，标准新推出了三类单位，别离是：

  1. The large viewport units（大视口单位）：lvw,lvh, lvi, lvb, lvmin, and lvmax
  2. The small viewport units（小视口单位）：svw, svh, svi, svb, svmin, and svmax
  3. The dynamic viewport units（动静视口单位）：dvw, dvh, dvi, dvb, dvmin, and dvmax

别看看上去很多，其实很好记忆，vw/vw/vmax/vmin 的前缀是 v，而：

  1. 大视口单位的前缀是 lv，意为 large viewport
  2. 小视口单位的前缀是 sv，意为 small viewport
  3. 动静视口单位的前缀是 dv，意为 dynamic viewport

这里咱们着重关注 lvh、svh、dvh。它们三者与 vw 有什么异同呢？

先来看大视口与小视口，标准对它们的定义是：

  1. Large Viewport: The viewport sized assuming any UA interfaces that are dynamically expanded and retracted to be retracted.
  2. Small Viewport: The viewport sized assuming any UA interfaces that are dynamically expanded and retracted to be expanded.

翻译一下：

  1. 大视口（Large Viewport）：视口大小假如任何动静扩大和缩回的 UA 界面都没有开展
  2. 小视口（Small Viewport）：视口大小假如任何动静扩大和缩回的 UA 界面都开展了

因而，对应到高度之上，其状态大抵如下：

了解了大视口与小视口之后，再了解动静视口就轻松了些。

简略而言，动静视口的意思是：

  1. 动静工具栏开展时，动静视口等于小视口的大小
  2. 当动静工具栏被缩回时，动静视口等于大视口的大小

因而，也就能失去上面这张图：

其中，dvh、dvw、dvmax、dvmin 对标 vh、vw、vmax、vmin 比拟好了解。

剩下，dvi 和 dvb 解释一下。其实，在之前也有 vi 和 vb 两个单位：

  1. vi：vi 代表 Viewport Inline，代表文档的内联方向。在程度书写方向上，这对应于视口的宽度，而在垂直书写方向上，这示意视口的高度。记住 inline 方向的简略办法是记住它与文本的方向雷同。
  2. vb：vb 代表 Viewport block，代表文档的块方向。这与 vi 程度书写方向相同，这将对应于视口高度，而在垂直文档中，这将示意视口的宽度。

因而，vi 和 vb 属于两个逻辑单位。对于 CSS 中的方位与程序，逻辑单位相干的内容，你能够看看我的这篇文章：https://github.com/chokcoco/iCSS/issues/127

了解了 vi 与 vb，dvi 与 dvb 也就很好了解了，它们别离示意动静视口下的 Viewport Inline 与 Viewport block。同理去了解大视口、小视口下的 lvi、lvb、dvi、dvb。

dvh、svh、lvh 它们的兼容性（2023-01-25）

截止到书写本文的工夫，它们曾经被 Chrome 108+ 反对，而 firefox、Safari 在更早的阶段，就曾经开始反对这些新单位了。

看看 CanIUse：

因而，在不久的未来，全面应用 dvh 代替 vh，能无效的缩小十分多因为 vh 在挪动端的体现而引起的问题。

总结一下

简略再总结一下，本文通过 vh 在挪动存在的问题动手，引出了标准新增的三大类新的和视口相干的单位。别离是：

  1. 大视口（Large Viewport）
  2. 小视口（Small Viewport）
  3. 动静视口（dynamic viewport）

它们的呈现，极大的补救了之前 vh/vw 等视口单位存在的问题。CSS 的更新迭代始终在疾速继续，很多内容还是有必要一直理解学习，在不久的未来就能很快利用在业务中。

此外，除了动静视口外，其实 CSS 还更新了与容器大小相干的绝对单位 — 譬如 cqw 和 cqh。

  • cqw：示意容器查问宽度（Container Query Width）占比。1cqw 等于容器宽度的 1%。假如容器宽度是 1000px，则此时1cqw 对应的计算值就是 10px
  • cqh：示意容器查问高度（Container Query Height）占比。1cqh 等于容器高度的 1%

容器查问：它给予了 CSS，在不扭转浏览器视口宽度的前提下，只是依据容器的宽度变动，对布局做成调整的能力。

也就是说，CSS 除了在视口这条路之外，也逐步在裁减摸索以及欠缺与容器大小变动相干的能力。

假期在群里看到了这样一张很有意思的图：

能够预感，将来 CSS 将朝着越来越简单、性能越来越弱小持续倒退，诸多新个性层出不穷。可能不再是很多人之前眼中的 比较简单 的一门语言。

不知是好是坏，且学且珍惜吧。

最初

文中对于动静视口相干的问题，局部图片来自这篇文章 — The large, small, and dynamic viewport units，能够一起学习，加深印象。

好了，本文到此结束，心愿本文对你有所帮忙 :)

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

退出移动版