CSS 媒体查询 PX vs EM vs REM

在本文中，我们将介绍 CSS 媒体查询中常用的单位：像素（PX）、相对单位（EM）和根单位（REM）的区别和使用场景。了解这些单位的差异将有助于我们根据设备的不同特性来创建适配性更好的响应式设计。

阅读更多：CSS 教程

像素（PX）

像素是最常见和最基本的单位，它表示页面上的一个像素点。在媒体查询中，我们可以使用像素作为断点来定义不同的样式。例如，我们可以通过在CSS中设置@media (max-width: 600px)来指定当设备宽度小于等于600像素时应用的样式。

这种方式非常简单直接，但缺点是不够灵活。由于像素是固定的单位，它无法根据用户的偏好或设备的特征来自适应。当用户调整浏览器的缩放级别时，像素单位的媒体查询可能无法达到我们期望的效果。

相对单位（EM）

相对单位EM是根据父元素的字体大小来计算的。如果一个元素的字体大小被设置为1em，它将等于父元素的字体大小。使用EM单位作为媒体查询的断点可以使我们的布局更具灵活性。

例如，我们可以通过设置@media (max-width: 30em)来在设备最大宽度等于30倍父元素字体大小时应用样式。这种方式可以使我们的布局更好地适应不同尺寸的屏幕和用户设置的字体大小。

根单位（REM）

根单位REM是相对于根元素（通常指HTML文档中的html元素）的字体大小的单位。根单位的值与EM类似，但根单位始终参考的是根元素的字体大小。通过设置根单位的字体大小，我们可以在整个页面中使用REM单位来实现响应式布局。

与EM单位相比，REM单位具有更大的灵活性。我们可以根据根元素的字体大小来定义媒体查询的断点，以适应不同的设备和字体设置。例如，我们可以通过设置@media (max-width: 50rem)来在设备最大宽度等于50倍根元素字体大小时应用样式。

示例说明

为了更好地理解这些单位之间的差异，我们来看一个示例。假设我们有一个响应式页面，其中一个元素的字体大小基于父元素的字体大小。我们使用上述三种单位来定义媒体查询的断点。

.parent {
  font-size: 20px;
}

.child {
  font-size: 1em;
  padding: 10px;
}

@media (max-width: 600px) {
  .child {
    font-size: 0.8em;
    padding: 5px;
  }
}

@media (max-width: 30em) {
  .child {
    font-size: 2em;
    padding: 20px;
  }
}

@media (max-width: 50rem) {
  .child {
    font-size: 1.5em;
    padding: 15px;
  }
}

在上面的示例中，当设备宽度小于等于600像素时，.child元素的字体大小将变为父元素字体大小的0.8倍，padding变为原来的一半。当设备宽度小于等于30倍父元素字体大小时，.child元素的字体大小将变为父元素字体大小的2倍，padding变为原来的两倍。当设备宽度小于等于50倍根元素字体大小时，.child元素的字体大小将变为根元素字体大小的1.5倍，padding变为原来的1.5倍。

通过使用不同的单位和媒体查询，在不同的设备上，元素的字体大小和布局可以自适应。这样我们可以为不同设备提供最佳的用户体验，无论是在桌面上浏览还是在移动设备上观看。

总结

CSS 媒体查询中的单位选择对于实现响应式设计非常重要。像素（PX）单位简单直接，但缺乏灵活性。相对单位（EM）基于父元素的字体大小，而根单位（REM）基于根元素的字体大小，可以在整个页面中实现灵活的响应式布局。通过恰当地选择适当的单位，并结合媒体查询，我们可以根据用户的设备特性提供更好的用户体验。