HTML与CSS学习第15天

HTML学习第15天

在这里插入图片描述

目录

1. 长度定位（vw/vh）

  • 相对单位
  • 相对于视口的尺寸计算结果

1.1 vw

  • vw：viewport width
  • 1vw=1/100视口宽度

1.2 vh

  • vh：viewport height
  • 1vh=1/100视口高度

1.3 根据设计稿确定对应的vh尺寸

  • vw单位尺寸：

    1. 查看设计稿宽度
    2. 确定参考设备宽度（视口宽度）
    3. 确定vm尺寸

  • vw单位尺寸计算

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

  • vh单位尺寸：

    1. 查看设计稿宽度
    2. 确定参考设备宽度（视口高度）
    3. 确定vh尺寸

  • vh单位尺寸计算

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

示例：vw初体验

<!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>Document</title>
    <style>
        /* 清除默认边距 */
        *{
            margin: 0;
            padding: 0;
        }

        /* 1vw=1/100视口宽度，自动实现适配，不需要媒体查询，不需要js */
        .box{
            width: 50vw;
            height: 30vw;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
  • 效果图

在这里插入图片描述

示例：vh初体验

<!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>Document</title>
    <style>
        .box{
            /* 1vh=1/100视口高度 */
            width: 50vh;
            height: 30vh;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
  • 效果图
    在这里插入图片描述

示例：vw与vh的计算

// out:./

*{
    margin: 0;
    padding: 0;
}

.box{
    // vw的转换，69px*28px
    width: (69/3.75vw);
    height: (28/3.75vw);
    background-color: pink;
}

.box2{
    // vh的转换
    width: (69/5.68vw);
    height: (28/5.68vw);
    background-color: blue;
}

注意点

  • vw和vh不要混用，可能会导致在另一台设备上不保持等比缩放
    • **例子：375 * 667的屏与375 * 812的屏，如果宽度用3.75vw，高度用6.67vh，375 667的屏长宽比为 宽度/3.75 3.75 ：高度/6.67 * 6.67，而375 * 812的屏，长宽比为 宽度/3.75 * 3.75：高度/6.67 * 8.12，变换后盒子不等比例缩放
posted @ 2022-02-24 22:36  凌歆  阅读(38)  评论(0)    收藏  举报