px、em、rem区别

px：像素，对于所占分辨率多少像素值。

em：相对长度单位，相对于所设置父级的文本字体尺寸单位。如未设置文本字体尺寸，则按照浏览器默认字体尺寸（如google默认16px）

/* 设置父元素字体文本尺寸
.father{
    font-size: 20px;
}
.father p{
    font-size: 2em;
}
.father>div{
    width: 20em;
    height: 20em;
    background: gray;
}
.father>div h1{
    font-size: 2em;
}

 

rem：是css3新增的相对长度单位，相对于html根元素设置的文本尺寸单位。只需设置根元素尺寸，则内容所有字体可按比例调整大小。

对于需要适配各种移动设备，使用rem长度单位。

比如在不同分辨率下，使用像素单位，会出现不同设备分辨率情况下，内容结构大小显示不同

 

所以需要在不同分辨率下按比例显示文本尺寸，使用rem相对长度单位，可采用媒体查询方法获取分辨率设置html根元素大小

/*移动端适配*/
@media screen and (min-width: 320px){
    html{
        font-size: 16px;
    }
}
@media screen and (min-width: 360px){
    html{
        font-size: 18px;
    }
}
@media screen and (min-width: 375px){
    html{
        font-size: 18.75px;
    }
}