你不知道的CSS单位

CSS中大部分属性值都有对应的量词单位，常见的如描述盒模型尺寸的 width, height, margin, padding, border，又比如CSS3中的transform属性的一些值。下面的导图中基本上包括了所有的单位，下面将详细介绍它们的定义及使用方式。
?

一、长度单位

1、相对字体长度单位

2、相对视口百分比长度单位

补充说明：% ,百分号比较特殊，本质上它不能算CSS长度单位，其值是相对于父元素的相同属性的百分比。

3、绝对长度单位

长度单位的使用场合最广泛，这里就不多介绍了。

长度单位使用场合建议:

二、其他单位

1、角度单位

使用场合

div{
    width: 300px;
    height: 200px;
    background: linear-gradient(180deg, red, blue); /* 标准的语法 */
    transform: rotate(30deg) skew(30deg,20deg);
}

2、时间单位

div
{
    transition: width 2s, height 2s, transform 2s;
    /* transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s; */
}

div
{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}

3、频率单位

使用场合
频率值使用在听（或说）属性中，有两个单位值，及赫兹和千赫，大部分浏览器并不支持这类属性

strong {
    voice-pitch: 1kHz;
}

4、分辨率单位

使用场合
根据设备像素比设置不同的样式

@media (min-resolution: 2dppx) { 
    ...
}

参考资料
W3C官方文档
The Lengths of CSS
Css units best practices