视区相关单位vw, vh

vw,是指CSS中相对长度单位,表示相对视口宽度(Viewport Width),1vw = 1% * 视口宽度
vh,是指CSS中相对长度单位,表示相对视口高度(Viewport Height),1vh = 1% * 视口高度

示例代码 :


p{
    font-size: 15vw;
}

如果视口的宽度是200mm,那么上述代码中p元素的字号将为30mm,即(15x200)/100,随着视口的变化,文字大写也会发生相应的调整

视口比例长度定义了相对于视口的长度大小,这是文档的可见部分。 当视口的大小被修改(通过更改桌面计算机窗口大小或旋转手机或平板设备的方向)时,只有基于Gecko的浏览器才会动态更新视口值。

如果html和body设置了overflow:auto,滚动条占据的空间不会从视口中减去(视口大小包括滚动条),但当设置为overflow:scroll时,滚动条占据的空间反而会从视口中减去(此时视口大小不包括滚动条)。

兼容性 :
兼容性

缺乏实际经验,至于该属性适合在什么场景下使用,以后会继续补充。

该文章同步在 :
简书 : https://www.jianshu.com/users/63adfe13324c/timeline

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值