VW、VH、%的区别和作用以及应用场景

VW和VH

作用:vh 与 vw 都是根据窗口大小比例适应显示,根据浏览器来进行定位的

1vw = 窗口宽度的1%
1vh = 窗口高度的1%

区别:VH和VW的查究仅次于一个是在于宽度,一个在于高度

应用场景: vw、vh 常用于移动端的布局之中

“%”

作用:%呢他是根据父元素进行定位的,所以你这个项目在你的电脑上是完美的,但是到了别人的电脑上就会出现样式混乱崩塌的效果。所以一般呢再写可视化的时候尽量全用VW和VH,这样你的样式放在任何电脑上都不会出现样式崩塌混乱的样子

相对长度单位:相对于父元素的百分比值,若父元素宽高改变,子元素会随之改变

position:fixed的元素 --> 相对于ViewPort(可视窗口)

场景使用:如果是随着父容器或者是整体页面布局而改变尺寸,则使用%更好,如元素的高度和宽度设置。

区别:vh / vw 与 %的区别在于,一个针对窗口计算,一个针对父元素计算


如果有哪里说的不对的地方,请多多指教大家一起加油,共同学习!!!
 

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值