vw和vh

5次阅读
没有评论

共计 435 个字符,预计需要花费 2 分钟才能阅读完成。

vw/vh 是什么

vw/vh 是一个相对单位(类似 em 和 rem 相对单位)

  • vw 是:viewport width 视口宽度单位
  • vh 是:viewport height 视口高度单位,相对视口的尺寸计算结果
  • 1vw = 1/100 视口宽度
  • 1vh = 1/100 视口高度

例如:当前屏幕视口是 375 像素,则 1vw 就是 3.75 像素,如果当前屏幕视口为 414,则1 vw 就是 4.14px 和百分比有区别的,百分比是相对于父元素来说的,而 vw 和 wh 总是针对于当前屏幕视口来说的

还原设计稿

假如设计稿宽度是 375 来设计的,有个盒子是 50 像素宽高的,如何使用 vw

① 设计稿宽度是 375,所有视口宽度尺寸是 375 像素

② 那么 1vm 是多少像素,算法:375px / 100 = 3.75px

③ 我们要使用 50px*50px 怎么换算成 vw,算法:50 / 3.75 = 13.33333vw

vw 注意事项

  • 因为设计到大量除法,还是适应 Less 搭配更好点
  • 我们本质是根据视口宽度来等比例缩放页面元素高度和宽度的,所以开发中使用 vw 就基本够用了, vh 很少使用
正文完
 0
qiaofugui.cn
版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-20发表,共计435字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码