Chrome发布新的CSS视口布局单位:svh、lvh、dvh!

更新日期: 2023-01-30阅读: 996标签: 单位
以下文章来源于前端开发爱好者 ,作者前端小菜鸡之菜鸡互啄

css 的 Viewport单位听起来很棒。

如果你想将一个元素设置成全屏高度,你可以设置高度:100vh,这样你就有了一个完美的全屏元素,它会随着视口的改变而改变大小!!!

 遗憾的是,事实并非如此!!!


vw、vh 的问题

要调整视口大小,可以使用 vw 和 vh 单位。

vw=视口大小宽度的 1%。
vh=视口大小高度的 1%。

给一个元素 100vw的宽度和 100vh 的高度,它将完全覆盖视口。


虽然现有的设备在桌面上运行良好,但在移动设备上则不同。在那里,视口大小受动态工具栏的存在或不存在的影响。这些是用户界面,如地址栏和选项卡栏。

虽然视口大小可以更改,但 vw 和 vh 大小不会更改。因此,大小为 100vh 的元素将从视口中溢出。


向下滚动时,这些动态工具栏将缩回。在此状态下,大小为 100vh 的元素将覆盖整个视口。


为了解决这个问题,在 CSS 中指定了视口的各种状态。


新的视口单位

在最近发布的 Chrome 108 中,带来了几个新的 CSS 视口单位:
小视口:这些动态工具栏是展开的
大视口:这些动态工具栏是缩回的

表示大视口的单位具有 lv 前缀。单位为 lvw、lvh、lvi、lvb、lvmin 和 lvmax。
表示小视口的单位具有 sv 前缀。单位为 svw、svh、svi、svb、svmin 和 svmax。

除非调整视口本身的大小,否则这些视口百分比单位的大小是固定的(因此是稳定的)。



动态视口

除了大视口和小视口,还有一个动态视口,它动态考虑了动态工具栏。

展开动态工具栏时,动态视口等于小视口的大小。
当动态工具栏缩回时,动态视口等于大视口的大小。

其附带的单位具有 dv 前缀:dvw、dvh、dvi、dvb、dvmin 和 dvmax。


这些单位在 Chrome108 中发布,加入了已经支持的 Safari 和 Firefox。目前,各大浏览器均已经对新的视口单位提供了支持。


链接: https://fly63.com/article/detial/12341

理解并使用CSS3中的单位rem vh vw vmin vmax

rem vh vw vmin vmax做为CSS3中的新单位,对CSS3的单位的使用了解是非常重要的,也许你会遇到一个问题可以通过css的这些单位得到解决,同时对于rem,vh和vw,百分比等都是我们做自适应网站常用的方法。

常用长度单位PX/EM/PT/百分比转换公式与对照表

PX、PT、EM、ex和in等都是我们常用的长度单位,尤其在网页的字体大小中经常用到。但是你知道PX、PT和EM之间是如何进行准换的吗?这里为大家找到了一个px、pt、em和percent大小转换的一个表格

CSS中字体单位:px、em、rem和%

对于绘图和印刷而言,“单位”相当重要,然而在网页排版里,单位也是同样具有重要性,在CSS3普及以来,更支持了一些方便好用的单位(px、em、rem…等),这篇文章将整理这些常用的CSS单位,也帮助自己未来在使用上能更加得心应手。

被误解的 em 单位

em 单位往往被认为是相对于父元素的 font-size 大小来进行计算的。例如一个元素的父元素设置了如下的 font-size:而其中的 div 设置了 font-size 设置了 1.5em :那么 div 元素的 font-size = 20 * 1.5 = 30px.

CSS尺寸单位

前端开发过程中,尺寸单位是我们必须用到的,下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍 在这之前,需要先对几个概念进行普及介绍

CSS角度单位:deg、grad、rad、turn

度(Degress)。一个圆共360度;梯度(Gradians)。一个圆共400梯度;弧度(Radians)。一个圆共2π弧度;转、圈(Turns)。一个圆共1圈

CSS3单位

像 px、rem、em、% 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位。CSS3 又引入了新单位:vw、vh、vmin、vmax。下面对它们做个详细介绍。

高清屏下canvas重置尺寸引发的问题

我们知道,清空canvas画布内容有以下两个方法。 第一种方法是cearRect函数:二种方法就是用原值重新设置一下canvas的宽(或者高)第二种方法可以起作用,是因为canvas的一个特点:

CSS单位之间的关系

像素 (px) 是一种绝对单位(absolute units), 因为无论其他相关的设置怎么变化,像素指定的值是不会变化的。其他的绝对单位如下:mm, cm, in: 毫米(Millimeters)

css 角度单位有哪些?

CSS角度单位有:deg、grad、rad、turn;下面本篇文章给大家介绍一下这些CSS角度单位。度(Degress)。一个圆共360度;梯度(Gradians)。一个圆共400梯度;弧度(Radians)。一个圆共2π弧度;转、圈(Turns)。一个圆共1圈

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!