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">
    <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>


你可能感兴趣的:(JavaScript)