1. 首页首页
  2. 科技前沿科技前沿

2025年vw和vh

科技前沿 • • 阅读 50

vw和vh1 基本概念 vw vh 是一个相对单位 类似于 em rem vw viewport width 视口宽度单位 vh viewport height 视口高度单位 相对视口的尺寸计算结果 1vw 1 100 视口宽度 1vh 1 100 视口高度 注意 和百分比是有区别的

大家好，我是讯享网，很高兴认识大家。

1.基本概念

vw/vh是一个相对单位（类似于em,rem)

  • vw：viewport width 视口宽度单位
  • vh：viewport height 视口高度单位

相对视口的尺寸计算结果

  • 1vw = 1/100视口宽度
  • 1vh = 1/100视口高度

注意：和百分比是有区别的，百分比时相对于父元素来说得，而vw和vh总是针对于视口来说的。

2.使用vw

  1. 开发设计中使用vw，需要使用像素大厨将模式改为2X
  2. 使用vw，还原设计稿需要做
    • 确定设计稿视口宽度。如375
    • 直接使用测量数值/（视口宽度/100）
    • 比如50/(375/100)

3.vw注意事项

  • 涉及大量less除法，还是适应less搭配更好点
  • 本质是根据视口宽度来等比例缩放页面高度和宽度的，所以开发中使用vw基本就够用了，vh很少使用
  • 兼容性：网站：https://caniuse.com/
    在这里插入图片描述
    讯享网

实战:bilibili官网首页（移动端）

  1. 准备好项目目录以及文件

  2. 准备好字体文件（下载别人网站字体）
    检查元素 --》iconfont样式表 --》复制字体url到浏览器地址栏 --》回车
  3. 准备好less文件
    生成的css文件自动放到css文件夹下面 
    "less.compile":{ 
      //设置导出css路径 "out": "../css" }

    讯享网

    在这里插入图片描述

  4. 准备项目内容

安装插件px2vw:将px单位转换为vw单位，下面修改默认设置
在这里插入图片描述
改成375是因为bilibili的默认设计稿是375
在这里插入图片描述
后面内容使用less+flex布局+vw即可

小讯
上一篇 2025-01-17 09:38
下一篇 2025-03-18 15:06

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/41292.html