CSS自适应布局, 视口单位属性 vx vh vmin vmax 长度计算函数calc()

ma_meng

于 2019-10-11 01:58:32 发布

阅读量1.8k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/guokaigdg/article/details/102493902

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

根据CSS3规范，视口单位主要包括以下4个：

  1.vw：1vw等于视口宽度的1%。

  2.vh：1vh等于视口高度的1%。

  3.vmin：选取vw和vh中最小的那个。

  4.vmax：选取vw和vh中最大的那个。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style>
        .wrap{
            /* vw : 长度为视窗宽比例
               vh : 长度为视窗高比例
               vmin : 视窗以宽高中小的为主
               vmax : 视窗以宽高中大的为主
               calc() : 长度计算函数
            */
            width: 50vw;
            height: 50vh;   /* 宽高2:1则 等效height: calc(50vw /2); */
            background: green;
        }
    </style>
</head>
<body>
    <div class="wrap">
        tt
    </div>
</body>    
</html>

ma_meng

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS自适应布局, 视口单位属性 vx vh vmin vmax 长度计算函数calc()

根据CSS3规范，视口单位主要包括以下4个： 1.vw：1vw等于视口宽度的1%。 2.vh：1vh等于视口高度的1%。 3.vmin：选取vw和vh中最小的那个。 4.vmax：选取vw和vh中最大的那个。<!DOCTYPE html><html><head> <meta charset="UTF-8"> ...
复制链接

扫一扫