大部分同学都知道,在 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 订阅收藏。

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

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

  1. html视口单位:vw,vh,rem

    前言 不像响应式布局,通过media query,设置几个变化点来适配,流体排版通过调整大小,适配所有设备宽度.这个方法可以使我们开发的网页,在几乎所有屏幕尺寸上都可以使用.但出于一些原因,它的使用率 ...

  2. 解决CSS垂直居中的几种方法(基于绝对定位,基于视口单位,Flexbox方法)

    在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用 text-align: center ;如果它是一个块级元素,就对它自身应用 margin: auto.然而如果要对 ...

  3. px、em、rem、vw、vh、vm、rpx这些单位的

    px是像素 em是参考父元素的font-size的倍数 rem是参考根元素的font-size 常用于响应式,一般会让html的font-size:625%,body的大小为.16rem.这样1rem ...

  4. CSS3视口单位vw,wh

    vw和vh是视口(viewport units)单位,何谓视口,就是根据你浏览器窗口的大小的单位,不受显示器分辨率的影响,是不是很神奇,这就代表了,我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应 ...

  5. css3新单位vw、vh的使用详解

    响应式布局的单位我们第一时间会想到通过rem单位来实现适配,但是它还需要内嵌一段脚本去动态计算跟元素大小. 比如: (function (doc, win) { let docEl = doc.doc ...

  6. 视区相关单位vw, vh..简介以及可实际应用场景

    这篇文章发布于 2012年09月24日,星期一,01:15,归类于 css相关. 阅读 37012 次, 今日 12 次 by zhangxinxu from http://www.zhangxinx ...

  7. 7个你可能不认识的CSS单位:rem vh vw vmin vmax ex ch

    rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.炒个栗子,如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于 ...

  8. css3自适应布局单位vw,vh你知道多少?

    视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...

  9. 视区相关单位vw, vh..简介以及可实际应用场景——张鑫旭

    一.N多的唠哩唠叨 CSS3中一些新的单位早在去年春暖花开的时候就介绍了,参见:CSS长度值及时间.频率.角度单位.显然,其中就提到了本文要感叹的单位vw, vh,见下图: 不过“我看见你”和“我触碰 ...

  10. css3自适应布局单位vw,vh详解

    视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...

随机推荐

  1. dns隧道攻击原理及常用工具流量分析

    DNS协议是一种请求应答协议,也是一种可用于应用层的隧道技术.虽然DNS流量的异常变化可能会被发现,但是在基于传统socket隧道已经濒临淘汰,TCP.UDP通信大量被安全设备拦截的大背景下,DNS. ...

  2. Vue3的新特性

    总概 1) 性能提升 打包大小减少 41% 初次渲染快 55%,更新渲染快 133% 内存减少 54% 使用 Proxy 代替 defineProperty 实现数据响应式 重写虚拟 DOM 的实现和 ...

  3. 这篇关于Oracle内存管理方式的介绍太棒了!我必须要转发,很全面。哈哈~

    "Oracle内存管理可分为两大类,自动内存管理和手动内存管理.其中手动内存管理又可分为自动共享内存管理,手动共享内存管理,自动PGA内存管理以及手动PGA内存管理.本文会简单的介绍不同的内 ...

  4. 自动化运维?看看Python怎样完成自动任务调度⛵

    作者:韩信子@ShowMeAI Python3◉技能提升系列:https://www.showmeai.tech/tutorials/56 本文地址:https://www.showmeai.tech ...

  5. 聊聊mysql的事务

    今天来聊聊事务的四大特性以及其实现原理,需结合之前写的mysql是如何实现mvcc的来理解,因为大多数的实现都是基于mvcc的,理论介绍完后会通过实例来演示mvcc又是如何实现这些隔离级别的 事务的四 ...

  6. Git配置和使用?Git你真的会用么?Git与SVN的主要区别

    1.Git环境配置    在学习Git之前,首先要知道什么是版本控制 1.1 版本控制:版本迭代.新的版本!版本管理器 版本控制是开发过程中用于管理我们的文件.目录或工程内容的修改内容,查看修改历史记 ...

  7. AGC007C Pushing Balls —— 期望的神题

    Problem Link 题意: 序列上按顺序交错有 \(n\) 个球和 \(n+1\) 个洞,即 \(hole_1,ball_1,hole_2,ball_2,\dots,ball_n,hole_{n ...

  8. OpenFeign

    OpenFeign-服务间的调用 一.什么是Feign和OpenFeign? 在使用Feign或者OpenFeign前,服务之间的调用路径在函数内部设置: 能不能像controller调用servic ...

  9. perl文件操作

    Perl 文件操作 Perl 使用一种叫做文件句柄类型的变量来操作文件. 从文件读取或者写入数据需要使用文件句柄. 文件句柄(file handle)是一个I/O连接的名称. Perl提供了三种文件句 ...

  10. linux如何删除多余网卡

    ifconfig tunl0 down ip link delete tunl0