CSS 单位 – %、em、rem、px、vh、vw-猿码集

在CSS中，有许多单位可供我们使用，但是相信许多人对于这些单位的使用和区别还不是很清楚。因此，本篇文章将深入讲解CSS单位的种类、使用方法以及适用场景。

1. 像素单位-px

在CSS中，像素单位(px)是最常用的单位之一。它可以让元素在不同的浏览器和不同的设备上呈现相同的尺寸。


div{
   width: 200px;
   height: 100px;
   font-size: 14px;
}

在上述代码中，width和height属性都使用了像素单位px，用于设置div元素的宽高。font-size属性也使用了像素单位px，用于设置文本的大小。但是，像素单位px的缺点在于它是一个绝对单位，这意味着当用户调整浏览器窗口大小或在不同的设备上查看网页时，元素的大小也会随之改变，这可能会对响应式设计产生影响。

2. em单位

em单位是相对单位，用于根据父元素的字体大小来计算元素的大小。根据W3C标准，1em应该等于元素所在的字体的font-size属性的值。例如，如果父元素的字体大小为14px，则1em将等于14px。

2.1 em单位的使用方法

可以通过以下方式使用em单位：


div{
  font-size: 18px;
  padding: 1em;
}

这里，padding属性使用了em单位，用于设置元素内边距。在这个例子中，1em将等于18px，因为字体大小被设置为18px。

2.2 em单位的优缺点

em单位主要用于相对长度，因此它在响应式设计中非常有用。通过使用em单位，可以使元素随着其父元素的字体大小改变而自适应地调整大小。但是，em单位的计算方式可能会出现混乱，特别是当元素嵌套多个层级时。在这种情况下，可能难以确定要使用的具体字体大小大小。

3. rem单位

rem单位也是相对单位，用于根据根元素的字体大小来计算元素的大小。根元素通常指元素。因此，1rem等于根元素的字体大小。默认情况下，根元素的字体大小为16px。

3.1 rem单位的使用方法

可以通过以下方式使用rem单位：


html{
  font-size: 16px;
}
div{
  font-size: 1rem; /*等于16px*/
  padding: 2rem; /*等于32px*/
}

在这个例子中，font-size属性设置为1rem，这意味着它将等于根元素的字体大小，即16px。padding属性也使用了rem单位，其中2rem等于32px。

3.2 rem单位的优缺点

和em单位一样，rem单位也用于相对长度，但是它的优点在于它相对于根元素的字体大小而不是父元素的字体大小进行计算。因此，它的使用较为简单且易于理解，特别是在代码嵌套的情况下。

4.百分比单位——%

百分比单位（%）是CSS中另一种常用的相对单位。它用于计算元素的大小、宽度、高度或其他属性，相对于其父元素的对应属性。

4.1 百分比单位的使用方法

可以通过以下方式使用百分比单位：


div{
  width: 50%;
  height: 50%;
  margin: 10%;
}

在这个例子中，宽度和高度属性都使用百分比单位，表示元素的大小相对于其父元素的大小。margin属性也使用了百分比单位，表示元素的外边距相对于其父元素的大小。

4.2 百分比单位的优缺点

百分比单位用于相对长度，并且可以用于许多CSS属性，比如宽度、高度、边距和填充等。使用百分比单位的主要优点是，其大小可以随着父元素的大小调整而自适应地调整。但是百分比单位也有一些缺点，例如其计算可能会相当复杂。另外，百分比大小不一定总是在所有浏览器和所有设备上呈现相同的样式。

5. 视窗单位-vh和vw

vw单位是相对单位，用于根据视窗宽度计算元素或字体的大小。例如，1vw等于视窗宽度的1%。vh单位也是相对单位，用于根据视窗高度计算元素或字体的大小。例如，1vh等于视窗高度的1%。

5.1 视窗单位的使用方法

可以通过以下方式使用视窗单位：


div{
  width: 50vw; /*宽度等于视窗宽度的50%*/
  height: 50vh; /*高度等于视窗高度的50%*/
  font-size: 3vw; /*字体大小等于视窗宽度的3%*/
}

在这个例子中，width和height属性都使用了vw和vh单位，用于根据视窗宽度和高度计算元素的大小。font-size属性也使用了vw单位，用于根据视窗宽度计算字体的大小。

5.2 视窗单位的优缺点

与em单位和rem单位相似，视窗单位也是相对单位，可以根据视窗大小自适应地调整元素的大小。然而，视窗单位的缺点在于，其计算相对复杂，使得代码难以理解。另外，在某些情况下，视窗单位也可能会导致元素的大小出现问题。

总结

在CSS中，单位的选择是非常重要的。选择正确的单位可以帮助我们更好地优化网页，并使其更加响应和适应性强。虽然之前提到了各种单位，但这并不是说您必须良好地掌握它们。通常，像素单位和百分比单位是使用最为广泛的单位，但对于响应式设计，em单位和rem单位更为重要。最后，视窗单位也是一种有用的相对单位，但要注意其使用情况。在实际工作中，需要综合考虑元素的具体情况来选择合适的单位，才能产生最佳的视觉效果。

CSS 单位 – %、em、rem、px、vh、vw