css中常用的单位是px(像素),因为px 是一个绝对的单位,不能随着手机屏幕大小的改变而改变,所以就用到了各种各样的相对单位
相对单位:
em:基准点为父节点的字体大小
body{
width:100em;
height:100em;
}
rem:相对根元素字体大小来计算,比如html元素
body{
width:100rem;
height:100rem;
}
vw:可视口的宽度,是视口宽度的1%来计算
body{
width:100vw;
}
vh:可视口的高度,是视口高度的1%来计算
body{
height:100vh;
}
vmin:是可视口宽度和可视口高度比较,取最小的那个值
body{
width:100vmin;
height:100vmin;
}
vmax:是可视口宽度和可是口高度比较,取最大的那个值
body{
width:100vmax;
height:100vmax;
}