大部分同学都知道，在CSS的世界里，有vw、vh、vmax、vmin等几个viewport相关的单位。通常：1vw等于视口宽度（ViewportWidth）的1/1001vh等于视口高度（ViewportHeight）的1/100vmin—vmin的值是当前vw和vh中较小的值vmax—vw和vh中较大的vh值在移动端有很大问题！然而，在手机上，情况就不同了。100vh并不总是等于一个屏幕高度。有时，在100vh的高度会出现滚动条。可以使用手机Chrome浏览器扫描下方二维码查看100vh在移动端的实际表现：根本原因是很多浏览器在计算高度时会考虑地址栏等相关控件的高度的100vh2同时，在很多情况下，由于弹出软键盘等操作，100vh的计算值在弹出过程中并不会实时变化！这也导致很多变相基于100vh的效果，会在无形中造成很多问题。图片来自：新视口相关单元的大、小、动态视口单位lvh、svh、dvh为了解决上述问题，规范引入了三种新的单位，即：(largeviewportunits)：lvw,lvh,lvi,lvb,lvmin,andlvmaxThesmallviewportunits(小视口单位)：svw,svh,svi,svb,svmin,andsvmaxThedynamicviewportunits(动态视口单位)：dvw,dvh、dvi、dvb、dvmin、dvmax看起来不是很多，其实很好记，vw/vw/vmax/vmin的前缀是v，大视口单元的前缀是lv，表示大视口小视口单元的前缀是sv，表示小视口。动态视口单元的前缀是dv，意思是动态视口。这里重点介绍lvh、svh、dvh。它们和vh有什么异同？我们先来看看大视口和小视口。规范将它们定义为：LargeViewport：视口大小假设任何动态扩展和缩回的UA接口被缩回。SmallViewport：视口大小假设任何UA接口动态扩展和缩回以扩展。翻译：LargeViewport（大视口）：视口大小假定任何动态伸缩的UA界面未展开SmallViewport（小视口）：视口大小假定任何动态伸缩的UA界面未展开。所以对应上面的高度，它的状态大致是这样的：了解了大视口和小视口之后，就更容易理解动态视口了。简单来说，动态视口就是：当动态工具栏展开时，动态视口等于小视口的大小；当动态工具栏收回时，动态视口等于大视口的大小。因此，也可以得到如下这张图：其中dvh、dvw、dvmax、dvmin比vh、vw、vmax、vmin更容易理解。其余的，dvi和dvb解释。其实之前有vi和vb两个单位：vi：vi代表ViewportInline，代表文档的行内方向。在水平书写方向上，这对应于视口的宽度，而在垂直书写方向上，这代表视口的高度。记住内联方向的一个简单方法是记住它与文本的方向相同。vb：vb代表Viewportblock，代表文档的块方向。这与vi的水平书写方向相反，它对应于视口高度，而在垂直文档中，这将代表视口宽度。因此，vi和vb属于两个逻辑单元。关于CSS中的方向和顺序，以及逻辑单元相关的内容，可以看我这篇文章：https://github.com/chokcoco/iCSS/issues/127理解vi和vb，dvi和dvb很容易理解，它们分别代表动态视口下的ViewportInline和Viewportblock。同理理解大视口和小视口下的lvi、lvb、dvi、dvb。dvh、svh、lvh的兼容性（2023-01-25）截止到写这篇文章的时候，Chrome108+已经支持了，而firefox和Safari也较早开始支持这些新单位。看看CanIUse：因此，在不久的将来，全面使用dvh代替vh，可以有效减少移动端因vh的性能而带来的诸多问题。简单再简单的总结一下，本文从移动端vh的问题入手，引出了规范中新增的三种新的viewport相关单元。它们是：大视口、小视口和动态视口。它们的出现大大弥补了之前vh/vw等视口单位的问题。CSS的更新迭代一直在快速进行，很多内容还需要不断的去理解和学习，才能在不久的将来快速应用到业务中。此外，除了动态视口之外，CSS实际上还会更新与容器大小相关的相关单位——例如cqw和cqh。cqw：表示容器查询宽度（ContainerQueryWidth）的比例。1cqw等于容器宽度的1%。假设容器宽度为1000px，此时1cqw对应的计算值为10pxcqh：代表容器查询高度的比例。1cqh等于容器高度的1%Container查询：它赋予了CSS在不改变浏览器视口宽度的情况下根据容器的宽度调整布局的能力。也就是说，除了视口路径之外，CSS也在逐渐扩展探索和完善容器大小变化的能力。假期在群里看到这样一幅有趣的图：可以预见，未来CSS将继续朝着越来越复杂、越来越强大的方向发展，许多新特性相继涌现。在很多人眼里，它可能不再是一门比较简单的语言。不知是好是坏，学习珍惜吧。文末部分与动态视口相关的图片来自这篇文章——Thelarge,small,anddynamicviewportunits。大家可以一起学习，加深印象。好了，本文到此结束，希望本文对你有所帮助：）更多精彩的CSS技术文章汇总在我的Github——iCSS，持续更新中。欢迎点个星订阅收藏。有什么问题或者建议可以多交流。原创文章文笔有限，知识匮乏。如果文章中有任何不准确的地方，请告诉我。
