看图说话,新 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

看图说话,你学废了吗?



相关文章
|
12天前
|
移动开发 前端开发 HTML5
CSS3 背景+CSS3 精灵图
CSS3 背景+CSS3 精灵图
|
2月前
【最简洁】一句CSS3代码实现不规则自定义背景图拼接样式,多用于异形弹窗背景图
【最简洁】一句CSS3代码实现不规则自定义背景图拼接样式,多用于异形弹窗背景图
|
2月前
|
缓存 前端开发 UED
CSS精灵图:提高网站性能的秘密武器
CSS精灵图:提高网站性能的秘密武器
31 0
|
2月前
|
前端开发
HTML和CSS拼成的像素图
HTML和CSS拼成的像素图
31 0
|
7月前
|
前端开发 安全 容器
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图(二)
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图
|
7月前
|
前端开发
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图(一)
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图
|
9月前
|
前端开发
CSS实现雷达图效果
CSS实现雷达图效果
|
12月前
|
前端开发
Echarts实战案例代码(49):基于不支持立体漏斗图Funnel的HTML+CSS解决方案
Echarts实战案例代码(49):基于不支持立体漏斗图Funnel的HTML+CSS解决方案
138 0
|
前端开发 容器
探索css渐变-实现饼图-加载图-灯柱
探索css渐变-实现饼图-加载图-灯柱
92 0