关于相对长度单位wh、vw的介绍及满足浏览器缩放网页适配实例

    <style>
        /* vw   viewpoint width，将视窗宽度分成100份，1vw=视窗宽度的1%  */
        /* vh   viewpoint height，将视窗高度分成100份，1vh=视窗高度的1%  */
        html,body{
            padding: 0;
            margin: 0;
        }
        .bif-box{               /* 生成一个相对浏览器容器百分百占比的div */
            width: 100vw;
            height: 100vh;
        }
        .small-box{
            float: left;
            width: 50vw;
            height: 50vh;
        }
        .small-box span{
            color: red;
            font-size: 1vh;         /* 字体也可以使用vh定义，1vh即视窗高度1% */
            vertical-align: top;
        }
        .small-box:nth-of-type(1){          /* 这里使用css3选择器 */
            background-color: #fff;
        }
        .small-box:nth-of-type(2){
            background-color: #ddd;
        }
        .small-box:nth-of-type(2) span{
            font-size: 2vh;
        }
        .small-box:nth-of-type(3){
            background-color: #808080;
        }
        .small-box:nth-of-type(3) span{
            font-size: 3vh;
        }
        .small-box:nth-of-type(4){
            background-color: #000;
        }
        .small-box:nth-of-type(4) span{
            font-size: 4vh;
        }
    </style>
    <div class="bif-box">
        <div class="small-box">
            <span>盒子1</span>
        </div>
        <div class="small-box">
            <span>盒子2</span>
        </div>
        <div class="small-box">
            <span>盒子3</span>
        </div>
        <div class="small-box">
            <span>盒子4</span>
        </div>
    </div>