CSS单位px、em、rem、vh、vw、vmin、vmax
1、px:相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
2、em:相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
3、rem:相对长度单位。r’是“root”的缩写,相对于根元素的字体大小
图示:
4、vh and vw:相对于视口的高度和宽度,而不是父元素的(CSS百分比是相对于包含它的最近的父元素的高度和宽度)
- 同屏幕等高的框:.slide { height: 100vh }
- 与屏幕同宽的标题,h1{ font-size:100vw }
5、vmin and vmax:关于视口高度和宽度两者的最小值或者最大值。
-
有一个元素,你需要让它始终在屏幕上可见
.box { height: 100vmin; width: 100vmin; } -
让这个元素始终铺满整个视口的可见区域
.box { height: 100vmax; width: 100vmax; }