不可不知的前端开发css单位

说到单位，那肯定就有两大类，一类为绝对单位，一类为相对单位。
绝对单位：
px像素：是绝对单位，是固定好的大小，不管是在pc端还是在移动端。因为开发人员开发是用电脑开发，所以排移动端时，不能使用px，而且，手机大小不一，固而不能使用px。
相对单位：
em：相对单位，相对于它父节点的字体大小，父元素字体为多大，1em就为多大。
rem：相对单位，相对于根元素（html），根元素字体为多大，1rem就为多大。
vw：相对单位，相对可视区的宽，宽为可视区大小的1%。
vh：相对单位，相对可视区的高，高为可视区大小的1%。
vmin：相对单位，相对可视区的宽高中的小值为它的大小。
vmax：相对单位，相对可视区的宽高中的大值为它的大小。

        html{
            font-size: 30px;
        }
        .rem{
            width: 10rem;
            height: 10rem;
            background-color: blue;
            font-size: 12px;
        }
        .em{
            width: 10em;
            height: 10em;
            background-color: red;
        }
        .vw{
            width: 10vw;
            height: 10vh;
            background-color: green;
        }
        .wmin{
            width: 10vmin;
            height: 10vmax;
            background-color: gray;
        }