HTML与CSS学习第15天

凌歆

已于 2022-03-02 14:55:45 修改

阅读量67

点赞数

分类专栏： HTML+CSS 文章标签： css html 学习

于 2022-02-24 22:36:26 首次发布

本文链接：https://blog.csdn.net/qq_33938234/article/details/123122684

版权

HTML+CSS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

本文介绍了HTML中用于视口尺寸定位的单位vw和vh，通过实例展示了如何根据设计稿计算vw和vh尺寸，并给出了使用vw和vh的初体验。同时，文章强调了混合使用vw和vh可能导致的比例问题，提醒开发者在不同设备上保持元素等比例缩放的重要性。

摘要由CSDN通过智能技术生成

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，变换后盒子不等比例缩放