CSS-元素单位

px

像素，基本单位

%

相对于父元素的尺寸。比如CSS 对齐中，根据 position: absolute 居中显示时，需要设置 left: 50%

.container {
    with: 200px;
    height: 200px;
    position: relative;
}
.box {
    with: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

em

相当于当前元素的 font-size。首行锁进可以使用 text-indent: 2em

rem

rem = root em 相对于根元素的 font-size。可以根据媒体查询，设置根元素的 font-size，实现移动端适配

@media only screen and (max-width: 374px) {
    /* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */
    html {
        font-size: 86px;
    }
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
    /* iphone6/7/8 和 iphone x */
    html {
        font-size: 100px;
    }
}
@media only screen and (min-width: 414px) {
    /* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */
    html {
        font-size: 110px;
    }
}

vw/vh

• vw: 屏幕宽度的 1%
• vh: 屏幕高度的 1%
• vmin: 两者最小值
• vmax：两者最大值