px (像素,绝对单位)
默认字体大小为16px
rpx (相对单位)
用于微信小程序,可以根据屏幕宽度进行自适应缩放
原理:rpx把不同大小的屏幕统一分成了750份,1 rpx = 屏幕宽度 / 750 px。
与px换算:例iPhone6屏幕宽度为 375 px,需要一个200px*200px的盒子,1rpx = 375/750=0.5px,所以自己需要设置width:400rpx;height400rpx。
em (相对单位)
相对于当前字体的单位
例:div{
font-size: 10px;
.text{
font-size: 2em;(等价于font-size: 20px)
}
}
如果当前字体没有设置,就相对于父级,如果都没设置em就想对的是浏览器默认的字体大小
rem (相对单位)
相对于当前根元素字体单位
浏览器的根元素:html元素,即<html>标签。
vw,vh (相对单位)
相对于窗口(屏幕)的大小
% (相对单位)
一般是相对于父元素
如果是固定定位,则是相对于窗口了