看图说话,新 CSS 单位 “svh” “dvh” 原来如此

简介: 看图说话,新 CSS 单位 “svh” “dvh” 原来如此

image.png

本篇通译自:The large, small, and dynamic viewport units


vw 和 vh 单位是我们都比较熟悉的两个单位,100vw 和 100vh 代表着视图窗口的宽和高。

image.png


我们在写移动端布局兼容的时候会经常用到它们,类似于百分比的写法;

它们有不错的兼容性:

image.png


然而有一个问题,当我们使用 100vh ,且有顶部地址栏或底部操作栏的时候,会出现溢出屏幕的情况:

image.png


当滑动滚动条的时候,地址栏和操作栏又会搜索,此时 100vh 又会充满整个窗口:

宽度也是如此,会受滚动条宽度的影响;

image.png


为了解决这个问题,出现了两个新单位:


svh、lvh

image.png

s 就是 small 的缩写

l 就是 large 的缩写

100 svh 将不会有溢出的情况!

image.png

除了 svh 还有另外一个更神奇的新单位:dvh,这个 d 是 dynamic 的缩写,它是动态的:


一图胜千言:

image.png

只不过 svh 和 dvh 的支持还没有特别的好

image.png

不过将来肯定会用上的~ 因为已经厌倦了那种算顶部栏、底部狂、侧边滚动条宽度及高度的日子。


除了 vh、svh、dvh 这个系列,再回复下另外我们可能忽视的单位:


vmin、vmax

vmin 是设备宽高最小的那个;

vmax 则是设备宽高最大的那个;


vi、vb

vi 是 Viewport Inline,可以简单理解为文本的走向上的宽度;

vb 则是与 vi 垂直;


与之对应的,也是有 svmin、dvmin、svmax、dvmax、svi、dvi、svb、dvb


总而言之:


svh 的 s 就是 small

dvh 的 d 就是 dynamic

看图说话,你学废了吗?



目录
打赏
0
0
0
0
2
分享
相关文章
|
11月前
【最简洁】一句CSS3代码实现不规则自定义背景图拼接样式,多用于异形弹窗背景图
【最简洁】一句CSS3代码实现不规则自定义背景图拼接样式,多用于异形弹窗背景图
CSS精灵图:提高网站性能的秘密武器
CSS精灵图:提高网站性能的秘密武器
118 0
|
11月前
|
HTML和CSS拼成的像素图
HTML和CSS拼成的像素图
62 0
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图(一)
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图
Echarts实战案例代码(49):基于不支持立体漏斗图Funnel的HTML+CSS解决方案
Echarts实战案例代码(49):基于不支持立体漏斗图Funnel的HTML+CSS解决方案
269 0
探索css渐变-实现饼图-加载图-灯柱
探索css渐变-实现饼图-加载图-灯柱
154 0
「CSS畅想」七夕寄情,我绘制了一副双色莲花图
用技术实现梦想,用梦想打开创意之门。七夕寄情,我用CSS绘制了一副双色莲花图。
222 1
「CSS畅想」七夕寄情,我绘制了一副双色莲花图
下一篇
oss创建bucket
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等