乐趣区

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

大部分同学都晓得,在 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

这里咱们着重关注 lvhsvhdvh。它们三者与 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. 当动静工具栏被缩回时,动静视口等于大视口的大小

因而,也就能失去上面这张图:

其中,dvhdvwdvmaxdvmin 对标 vhvwvmaxvmin 比拟好了解。

剩下,dvidvb 解释一下。其实,在之前也有 vivb 两个单位:

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

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

了解了 vivbdvidvb 也就很好了解了,它们别离示意动静视口下的 Viewport Inline 与 Viewport block。同理去了解大视口、小视口下的 lvilvbdvidvb

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 还更新了与容器大小相干的绝对单位 — 譬如 cqwcqh

  • 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 订阅珍藏。

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

退出移动版