草庐IT

vh 存在问题？试试动态视口单位之 dvh、svh、lvh

ChokCoco 2023-03-28 原文

大部分同学都知道，在 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。它们三者与 vh 有什么异同呢？

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

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

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

dvhsvhcodeli1fbpfcpHtml/Css

有关vh 存在问题？试试动态视口单位之 dvh、svh、lvh的更多相关文章

  1. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  2. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  3. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  4. ruby - Fast-stemmer 安装问题 - 2

    由于fast-stemmer的问题，我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

  5. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  6. java - 从 JRuby 调用 Java 类的问题 - 2

    我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java，并成功地将它与另一个Java包一起使用，但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www

  7. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章？ - 2

    我意识到这可能是一个非常基本的问题，但我现在已经花了几天时间回过头来解决这个问题，但出于某种原因，Google就是没有帮助我。(我认为部分问题在于我是一个初学者，我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI，但我仍然停留在这个问题上.我找到了一些关于多态关系的信息，但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

  8. ruby-on-rails - rspec - 如何检查方法是否存在？ - 2

    我的模型有defself.empty_building//stuffend我怎样才能对这个现有的进行rspec？，已经尝试过:describe"empty_building"dosubject{Building.new}it{shouldrespond_to:empty_building}endbutgetting:Failure/Error:it{shouldrespond_to:empty_building}expected#torespondto:empty_building 最佳答案 你有一个类方法self.empty_bu

  9. 【高数】用拉格朗日中值定理解决极限问题 - 2

    首先回顾一下拉格朗日定理的内容：函数f(x)是在闭区间[a,b]上连续、开区间(a,b)上可导的函数，那么至少存在一个，使得:通过这个表达式我们可以知道，f(x)是函数的主体，a和b可以看作是主体函数f(x)中所取的两个值。那么可以有，  也就意味着我们可以用来替换 这种替换可以用在求某些多项式差的极限中。方法： 外层函数f(x)是一致的，并且h(x)和g(x)是等价无穷小。此时，利用拉格朗日定理，将原式替换为 ，再进行求解，往往会省去复合函数求极限的很多麻烦。使用要注意：1.要先找到主体函数f(x)，即外层函数必须相同。2.f(x)找到后，复合部分是等价无穷小。3.要满足作差的形式。如果是加

  10. SPI接收数据异常问题总结 - 2

    SPI接收数据左移一位问题目录SPI接收数据左移一位问题一、问题描述二、问题分析三、探究原理四、经验总结最近在工作在学习调试SPI的过程中遇到一个问题——接收数据整体向左移了一位（1bit）。SPI数据收发是数据交换，因此接收数据时从第二个字节开始才是有效数据，也就是数据整体向右移一个字节（1byte）。请教前辈之后也没有得到解决，通过在网上查阅前人经验终于解决问题，所以写一个避坑经验总结。实际背景：MCU与一款芯片使用spi通信，MCU作为主机，芯片作为从机。这款芯片采用的是它规定的六线SPI，多了两根线：RDY和INT，这样从机就可以主动请求主机给主机发送数据了。一、问题描述根据从机芯片手

随机推荐