- rem:相对于根元素而言,1rem等于根元素的font-size,一般浏览器的默认字体大小为16px
html{
font-size: 20px;
}
.box{
width: 20rem;
height: 20rem;
background-color: orange;
}
比如我们按照以上设置样式,可以看到如下效果
类名为box的元素宽度和高度为400px了。
- px:像素px是相对于显示器分辨率而言,不会随着可视窗口的改变而改变,属于绝对单位。
- em:相对于父级元素的font-size而确定具体大小,如果我们编写以下css代码
.parent{
font-size: 20px;
}
.children{
width: 20em;
height: 20em;
background-color: blue;
}
此时对应的页面效果如下,可以看出带有children类名的蓝色盒子的宽度和高度都为父级字体大小的20倍了。
- rpx:微信小程序中的相对单位,解决屏幕自适应的尺寸问题。
以 iPhone6 为例,iPhone6 的屏幕宽度为 375px ,共有 750 个物理像素,则 750rpx = 375px = 750 物理像素。所以在微信小程序开发中推荐按750px出设计图,此时1rpx=1px;
- vh:相对于视窗的高度计算大小,视窗高度为100vh;
计算方式:比如视窗高度为100px时,1vh就为 (1 * 100)/ 100 = 1px
- vw:相对于视窗的宽度计算大小,视窗高度为100vw;
计算方式:同vh
如有不足之处,还请大家多多指正。
扫描二维码关注公众号,回复:
13504294 查看本文章