Day13:vw 和 vh 基本使用

目标:使用 vw 和 less 完成移动端的布局。

一、vw 适配方案

1、vw 和 vh 基本使用

vw 和 vh 是相对单位,相对视口尺寸计算结果。

  • vw:viewport width(1vw = 1/100视口宽度 )
  • vh:lviewport height ( 1vh = 1/100视口高度 )
html 复制代码
<head>
  <title>vw 和 vh 基本使用</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    /* vw 和 vh 是相对视口宽高计算结果,可以直接实现移动端适配效果 */
    /* .box {
        width: 50vw;
        height: 30vw;
        background-color: pink;
      } */

    .box {
      width: 20vh;
      height: 50vh;
      background-color: green;
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>
2、px 转换为 vw 和 vh

vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )

vh单位的尺寸 = px 单数数值 / ( 1/100 视口高度 )

以主流设计稿尺寸(375 * 667)为例子,则:

  • 1vw = xxx px / 3.75
  • 1vh = xxx px / 6.67

举一个简单的例子,帮助大家理解:

  1. index.html 代码
html 复制代码
<head>
    <title>px 转换为 vw 和 vh</title>
    <link rel="stylesheet" href="./demo.css">
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
  1. less 代码
less 复制代码
.box1 {
  width: (68 / 3.75vw);
  height: (29 / 3.75vw);
  background-color: pink;
}

.box2 {
  width: (68 / 6.67vh);
  height: (29 / 6.67vh);
  background-color: green;
}

// px单位尺寸 / 1/100视口的宽度或高度
  1. css 代码
css 复制代码
.box1 {
  width: 18.13333333vw;
  height: 7.73333333vw;
  background-color: pink;
}

.box2 {
  width: 10.19490255vh;
  height: 4.34782609vh;
  background-color: green;
}
3、vw 和 vh 混合使用的问题

vw 和 vh 不混合使用, 一般使用 vw 作为单位尺寸。

比如:375 * 667 的设计稿有一个 100 * 100 的正方形,如果混合使用 width: (100 / 3.75vw),height: (100 / 6.67vh),在 375 * 667 屏幕下是个正方形,如果换成其他像素的手机,就可能不再是正方形了。

所以我们在使用 vw 或 vh 布局时,只使用是一个单位,width: (100 / 3.75vw),height: (100 / 3.75vw)width: (100 / 6.67vh),height: (100 / 6.67vh),这样就能保证在所有屏幕上都是一个正方形。一般我们使用 vw 开发。

二、综合案例-酷我音乐

结合之前所学,使用 vw 完成如下移动端页面布局:

想要完整代码的,点击这里获取Day13综合案例完整代码。完全免费,仅供学习参考使用。


乾坤未定,你我皆是黑马

相关推荐
Never_Satisfied1 小时前
在JavaScript / HTML中,line-height是一个CSS属性
javascript·css·html
前端Hardy4 小时前
HTML&CSS&JS:纯前端图片打码神器:自定义强度 + 区域缩放,无需安装
前端·javascript·css
这可不简单4 小时前
前端性能优化:从浏览器渲染原理到实战(告别 “知其然不知其所以然”)
前端·css·面试
小小前端_我自坚强6 小时前
Tailwind CSS 详解
css·程序员·开源
汤姆Tom6 小时前
CSS 新特性与未来趋势
前端·css·面试
PFinal社区_南丞6 小时前
现代CSS开发环境搭建
css
PFinal社区_南丞6 小时前
容器查询 - 组件级响应式设计
css
Python私教7 小时前
React + Ant Design + Tailwind CSS 打造「无痕」垂直滚动区域:功能全上,滚动条隐身
前端·css·react.js
PFinal社区_南丞7 小时前
Flexbox布局实战指南
css
PFinal社区_南丞7 小时前
CSS3简介和历史发展
css