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%