除了使用 em
或 px
设置文本大小,你还可以用视窗单位来做响应式排版。 视窗单位和百分比都是相对单位,但它们是基于不同的参照物。 视窗单位是相对于设备的视窗尺寸(宽度或高度),百分比是相对于父级元素的大小。
四个不同的视窗单位分别是:
vw
:如10vw
的意思是视窗宽度的 10%。vh:
如3vh
的意思是视窗高度的 3%。vmin:
如70vmin
的意思是视窗的高度和宽度中较小一个的 70%。vmax:
如100vmax
的意思是视窗的高度和宽度中较大一个的 100%。
下面这个例子是设置 body
标签的宽度为视窗宽度的 30%。
body { width: 30vw; }