Day13：vw 和 vh 基本使用

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

一、vw 适配方案

1、vw 和 vh 基本使用

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

vw：viewport width（1vw = 1/100视口宽度）
vh：lviewport height ( 1vh = 1/100视口高度 )

<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

举一个简单的例子，帮助大家理解：

index.html 代码

<head>
    <title>px 转换为 vw 和 vhtitle>
    <link rel="stylesheet" href="./demo.css">
head>

<body>
    <div class="box1">div>
    <div class="box2">div>
body>

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视口的宽度或高度

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综合案例完整代码。完全免费，仅供学习参考使用。

在这里插入图片描述

乾坤未定，你我皆是黑马

相关阅读:
建设网站制作公司的选择标准是什么？
高通平台Android 蓝牙调试和配置手册-- A2DP Audio Quality Issues
MIT6.830-lab6-Rollback and Recovery(数据库的日志回滚和恢复)
Prometheus+Grafana可视化监控【Nginx状态】
Android 13 新特性及适配指南
S/4HANA(本地部署或云版)跟 SAP 家族系统以及非SAP系统的集成，到底什么是推荐的方式？
学3D建模能作为副业吗?
使用 NanUI 快速创建具有现代用户界面的 WinForm 应用程序
【多御安全浏览器】极简无广告，开发设计思路贴近用户需求
springboot+mybatis+mysql+Quartz实现任务调度（定时任务，实现可配置）

原文地址：https://blog.csdn.net/EmulateStep/article/details/139484221