CSS – 视图单位

CSS 中px,em,rem,vw区别

px像素,全称pixel。px是相对长度单位,相对于屏幕分辨率而言。IE无法调整基于px的字体大小。

em,相对长度单位。相对于当前对象内文本的字体尺寸font-size,默认为浏览器的default字体尺寸。

⚠️注意:

  1. 浏览器默认font-size为16px,即默认情况下1em=16px。为了简化font-size换算,通常会在body的选择器样式中声明font-size=62.5%,即1em=10px,1.2em=12px。
  2. em可以继承。父元素中的font-size会影响子元素。因此62.5%只需在父级元素中声明一次即可。

rem,root em。是CSS3中的相对单位。是相对于HTML的根元素。即只修改根元素就可以成比例的调整所有字体大小。由于IE8及之前版本不支持rem,因此声明时使用“px绝对单位+rem相对单位”进行声明更加保险。

p {font-size:14px; font-size:.875rem;}

vw和vh是viewport units视图单位。它是基于浏览器窗口大小,而不是显示器分辨率。1vw = 可视窗口的宽度的百分之一。与百分比不同,vw始终相对于可视窗口的宽度,而百分比和其父元素的宽度有关。

vh是视图单位的高度。

vmin和vmax。vmin为vw和vh中最小的那个值,vmax则为最大的那个值。


vw,vh应用1:响应式垂直居中

#box { 
  width: 50vw; 
  height: 50vh; 
  margin: 25vh auto; 
}

再设置margin的上下间距,使:
height + margin-top +margin-bottom = 100 ,
width + margin-left + margin-right = 100 

vw,vh应用2:模仿bootstrap的栅栏布局

.col-2 { 
  float: left; 
  width: 50vw; 
} 
.col-4 { 
  float: left; 
  width: 25vw; 
} 
.col-5 { 
  float: left; 
  width: 20vw; 
} 
.col-8 { 
  float: left; 
  width: 12.5vw; 
}

即:使得一行中的所有列加和为100vw即可。