CSS的基本单位

前言

学习或者从事前端的朋友都知道，CSS的单位确实还挺多，而且在实际开发中是必不可少的，用得好能够成就一款好产品，用得不好会给产品造成瑕疵从而影响整体。那么今天我们就来剖析一下CSS的单位，看看他们都有些什么特性。

浏览器支持

图1

相对单位

.flex-box:nth-child(1) {
    font-size: 5em;
}

.flex-box:nth-child(2) {
    font-size: 5ex;
}

.flex-box:nth-child(3) {
    font-size: 5ch;
}
.flex-box:nth-child(4) {
    font-size: 5rem;
}
.flex-box:nth-child(5) {
    font-size: 5vw;
}
.flex-box:nth-child(6) {
    font-size: 5vh;
}
.flex-box:nth-child(7) {
    font-size: 5vmin;
}
.flex-box:nth-child(8) {
    font-size: 5vmax;
}
.flex-box:nth-child(9) {
    font-size: 100%;
}

图2

绝对单位

• CSS

.flex-box:nth-child(1) {
    font-size: 1cm;
}

.flex-box:nth-child(2) {
    font-size: 5mm;
}

.flex-box:nth-child(3) {
    font-size: 1in;
}
.flex-box:nth-child(4) {
    font-size: 10px;
}
.flex-box:nth-child(5) {
    font-size: 10pt;
}
.flex-box:nth-child(6) {
    font-size: 1pc;
}

图3

总结

相对单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更为合适。 而绝对单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。

(本文适合初学者，如果你是大佬级别的人物，我也欢迎指教！)