em rem px vw/vh 的区别

em

相对于当前元素的 font-size

div{
    font-size:10px;
    width:3em;//30px
}

rem

rem也就是root em，相对于根元素元素的 font-size

html{
 font-size:20px;
}

div{
    font-size:10px;
    width:3rem;//60px
}

说到rem很多人就会想到rem适配，我们可以使用媒体查询设置font-size的大小，来实现适配

@media only screen and (max-width: 374px) {
    /* iphone5 或者更小的尺寸e */
    html {
        font-size: 86px;
    }
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
    /* iphone6/7/8等 */
    html {
        font-size: 100px;
    }
}
@media only screen and (min-width: 414px) {
    /* iphone6p 或者更大的尺寸 */
    html {
        font-size: 110px;
    }
}

px

px其实没什么好解释的，大家入门的时候就是使用px，px就是像素，基本单位

【小tip】小程序会使用rpx来做兼容，1px = 2rpx 小程序rpx去做兼容性的原理就是以屏幕宽度375作为基准，通过百分比来进行移动端适配

vw

屏幕宽度的 1%

vh

屏幕高度的 1%