px
px 相对单位。像素px是相对于显示器屏幕分辨率而言的。
em
em 相对单位。em是相对于当前对象内文本的字体大小，如果对象内文本的字体大小未设置，则相对于浏览器的默认尺寸。
举例
<body>body
<div class="div1">div1
<div class="div2">div2
<div class="div3">div3</div>
</div>
</div>
</body>
<style>
div{font-size:1.5em}
</style>
页面显示效果为
计算关系是这样的
浏览器默认的font-size为14px，body继承html
body font-size=14px
所有的div 都设置了font-size:1.5em
所以 根据em的定义
.div1 font-size=14*1.5=21px
.div2 font-size=21*1.5=31.5px
.div2 font-size=31.5*1.5=47.25px
rem
rem 相对长度单位。相对于html的根元素。r是‘root’的缩写。
<body>body
<div class="div1">div1</div>
</body>
<style>
div{font-size:1.5rem}
</style>
页面显示效果为
计算关系
body font-size=14px
.div1 font-size=14*1.5=21px
vh vw
vh vw 相对视口的高度和宽度。1vh= 1/100的视口高度 1vw= 1/100的视口宽度
比如说 浏览器的宽度为 1200px 高度为 900px
1vw=12px 1vh=9px
我们可以实现同屏幕高度的框 .div{height:100vh}
Vmin Vmax
Vmin Vmax 相对视口宽度和高度的最小值和最大值
比如说 浏览器的宽度为 1200px 高度为 900px
那么 Vmax=1200/100=12px Vmin=900/100=9px
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
