文章断更了近一个月哈哈哈哈，太忙了：作品赛、期末考试、赶项目。。。好在现在闲下来了，这是在回家的高铁上，车程太长，不知道可以做些什么，突然想起来近段时间在项目开发中遇到了一些CSS单位问题，现在恰好可以写一篇文章来总结一下，不然用错单位可是要闹很大的笑话哈哈哈哈哈（说的是我，没错。

---

单位的分类

我大致是把目前已经知道的CSS单位分为两类：相对单位、绝对单位。

绝对单位

首先说绝对单位。听名知意，绝对单位就是相对于物理屏幕的单位，比如常见的px，当然还有不常见的in cm mm（笔者也是写这篇文章时才知道），这里我们主要来说一下px。

相对单位

相对单位，从字面意思理解就是相对于父元素或者其他父辈元素的单位，这里常见有：rem、em、vw、vh、rpx(uniapp)等等。这类元素有一个统一特点：针对不同的物理设备，会展现出不同的结果，比如16:9、4:3屏幕等等。

---

码上解读

本文通篇案例的html结构如下：

大盒子container中有一个father父盒子和一个son的小盒子。

    <div class="container">
        <div class="father">
            father
            <div class="son">
                son
            </div>
        </div>
    </div>

px

上面说到px是绝对单位，和屏幕的物理素质有关。那就要首先说说常见的屏幕素质：

• 1K: 1920*1080
• 2K：2560*1440

因为不同的规格，所以当用px为单位时，如果在1k屏幕上正常，但可能在其他规格的屏幕上就会出现排版错误、元素变小等问题。

.container {
            width: 1920px;
            height: 1080px;
            background-color: #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .father {
            width: 200px;
            height: 200px;
            background-color: red;
            border: 1px solid blue;
            color: #fff;
            font-size: 20px;

            .son {
                width: 100px;
                height: 100px;
                background-color: blue;
                border: 1px solid red;
                font-size: 20px;
                color: #fff;
            }
        }

这里用了原生css的嵌套语法，部分浏览器可能不支持，以Chrome为准

上面的例子就出现了px单位因为屏幕素质不一样而出现样式问题的情况。但并不是说px毫无用处，它在单位的精确控制、纸面打印，以及旧版浏览器兼容上有绝对优势。

%

单位%相信大家就非常熟悉了，我们初学css时最开始接触的恐怕就是px和%，上面说了%具有响应式。正如它的名字：相对于父辈元素的占比。比如父盒子沾满屏幕，子盒子设置50%，那么无论在什么屏幕上，子盒子始终占父盒子的一半。

        .container {
            width: 100%;
            height: 100%;
            background-color: #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .father {
            width: 50%;
            height: 50%;
            background-color: red;
            border: 1px solid blue;
            color: #fff;

            .son {
                width: 50%;
                height: 50%;
                background-color: blue;
                border: 1px solid red;
                color: #fff;
            }
        }

%的兼用型几乎和px对等，属于最最最原始的响应式单位。但是它也有局限性，比如有些属性不支持，font-size，font-width等，往往只对盒子的width和height生效。

em

em是个相对单位长度。相对于父元素的字体尺寸，往往只对font-size生效。层层相对和继承之后，如果没有设置根元素html的字体尺寸，em最终指向浏览器默认字体尺寸（这个就看个人怎么设置的了）。

rem

rem是css新增的一个单位，对比em多了个r，即root。设置一个跟字体属性大小，然后用倍数改变字体尺寸。

html {font-size: 62.5%}  /* 假设默认16px,则 16*62.5%之后便是10px，方便计算 */ 
body {font-size: 1.6rem}  /* 10px*10.6=16px */

html {
            font-size: 62.5%;
        }

        .container {
            width: 100%;
            height: 100%;
            background-color: #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .father {
            width: 50%;
            height: 50%;
            background-color: red;
            border: 1px solid blue;
            color: #fff;
            font-size: 3rem;

            .son {
                width: 50%;
                height: 50%;
                background-color: blue;
                border: 1px solid red;
                color: #fff;
                font-size: 1.5rem;
            }
        }

vw、vh

view-width和view-height，即视口宽度和视口高度。所谓视口就是浏览器可视区域，视口单位会把浏览器可视区域平分为100份，比如1vw，1vh从而实现响应式。

vw和vh几乎使用所有带单位的属性，这一点毋庸置疑。

.father {
            width: 50vw;
            height: 50vh;
            background-color: red;
            border: 1vh solid blue;
            color: #fff;
            font-size: 4vh;

            .son {
                width: 25vw;
                height: 25vh;
                background-color: blue;
                border: 1vw solid red;
                color: #fff;
                font-size: 2vh;
            }
        }

uniapp单位：rpx

rpx是uniapp的特有单位，笔者最初写uniapp的时候用的是vh、vw，可是最终在不同机型上出现了样式的错乱。最后去修改单位的时候才发现uniapp有自己的单位：rpx。

大概是：uniapp为了解决单位适配问题，把所有的屏幕宽度设置为默认的750rpx，对于高度则要计算或者换用其他单位如%。那么rpx怎么怎么知道具体选夺少呢？

一般来说如果UI设计图如果是uniapp设计图大概率给的是rpx单位，否则如果是px单位，就要*2换算成rpx，乘以夺少视具体情况而定。

---

小结

项目中用什么单位要提前确定，当然也不是说就单独用一个单位，很多情况下px、vh、vw都是混合着使用。