CSS单位之vw、vh、vmin、vmax、%

最新推荐文章于 2024-05-10 01:10:16 发布

V。on

最新推荐文章于 2024-05-10 01:10:16 发布

阅读量3.4k

点赞数 1

分类专栏： css 文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_40864647/article/details/129022433

版权

css 专栏收录该内容

31 篇文章 6 订阅

订阅专栏

CSS单位之vw、vh、vmin、vmax、%

vm/vh：相对于视窗（Viewport）的高度和宽度。

1vh 等于1/100的视窗高度，1vw 等于1/100的视窗宽度。
视窗(Viewport)是指浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

vmin/vmax：取视窗高度和宽度的最小值作为基准/取视窗高度和宽度的最大值作为基准。

浏览器视窗大小为 window.innerWidth=1920px，window.innerHeight=1080px，那么，1vmin=1080px/100=10.8px; 1vmax=1920px/100=19.2px。

%：相对于父元素的长度高度。

注意：position:fixed时，无论当前元素放在哪里，将相对于窗口宽度。
position:absolute时，将相对于其相对的元素宽度（递归父元素直到第一个设置了position的元素）。

下面通过一个例子来说明vmin及vmax：

<!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>
        * {
            padding: 0;
            margin: 0;
        }
        .container {
            width: 100vmin;
            height: 100vmin;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>

效果如下：
在这里插入图片描述

下面是用一个例子来说明vmin和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>
        * {
            padding: 0;
            margin: 0;
        }
        html,body {
            width: 100%;
            height: 100%;
        }
        body {
            display: flex;
            justify-content: space-between;
        }
        .container1 {
            width: 30vmin;
            height: 30vmin;
            background-color: red;
        }

        .container2 {
            width: 30vw;
            height: 30vw;
            background-color: blue;
        }

        .container3 {
            width: 30%;
            height: 30%;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container1"></div>
    <div class="container2"></div>
    <div class="container3"></div>
</body>
</html>

效果如下：
在这里插入图片描述

V。on

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS单位之vw、vh、vmin、vmax、%

视窗(Viewport)是指浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。position:absolute时，将相对于其相对的元素宽度（递归父元素直到第一个设置了position的元素）。注意：position:fixed时，无论当前元素放在哪里，将相对于窗口宽度。1vh 等于1/100的视窗高度，1vw 等于1/100的视窗宽度。下面通过一个例子来说明。下面是用一个例子来说明。
复制链接

扫一扫