前端基础进阶6

前端基础进阶

长度单位

vw / vh

使用vw单位设置网页元素的尺寸
相对单位
相对视口的尺寸计算结果
vw：viewport width
- 1vw = 1/100视口宽度
vh：viewport height
- 1vh = 1/100视口高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体验vw和vh</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 1. vw = 1/100视口宽度 */
        /* .box {
            width: 50vw;
            height: 30vw;
            
        } */

        /* 2. vh = 1/100视口高度 */
        .box {
            width: 50vh;
            height: 30vh;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

vw适配原理
- 实现在不同宽度的设备中，网页元素尺寸等比缩放效果
- vw单位尺寸
  - 1、确定设计稿对应的vw尺寸（1/100视口宽度）
    - 查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 （1/100 视口宽度）
  - 2、vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )
- vh单位尺寸
  - 1、确定设计稿对应的vh尺寸（1/100视口高度）
    - 查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸 （1/100 视口高度）
  - 2、vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )
- 思考：开发中，会不会vw和vh混用呢？
  - 不会。
  - vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。
rem 和 vw / vh 的区别