@media 查询 CSS

在编写 CSS 样式时，@media 查询是一种非常有用的工具。它允许我们根据用户设备的不同特征，如屏幕大小、分辨率、屏幕方向等，为不同类型的设备设置不同的样式。

语法

下面是使用 @media 查询的基本语法：

@media mediatype and (expressions) {
  /* CSS 规则 */
}

其中，mediatype 可以是 all、screen、print 等。 expressions 用于确定查询条件，如屏幕宽度和高度，分辨率等。CSS 规则针对满足查询条件的设备进行设置。

示例

接下来看一些示例，以便更好地理解 @media 查询是如何工作的。

1. 设置屏幕大小为 480 像素以下的设备的样式

@media screen and (max-width: 480px) {
  body {
    background-color: yellow;
  }
}

在这个示例中，可以看到屏幕的宽度必须小于等于 480px，才会对 body 元素生效。

2. 设置仅在移动设备上显示的样式

@media only screen and (max-device-width: 480px) {
  body {
    background-color: yellow;
  }
}

注意这里使用 only 关键字，以便仅适用于移动设备。

3. 设置仅在打印时显示的样式

@media print {

  body {
    font-size: 12pt;
  }

  h1 {
    page-break-after: always;
  }
}

在这个示例中，CSS 规则用于在打印时设置文档中标题的页面分隔符。

结论

@Media 查询提供了一种强大的方式，可以为不同类型的设备提供不同的样式。 通过使用 @media 查询，我们可以创建响应式布局，以便 Web 应用在各种设备上提供最佳体验。以上就是 @media 查询的基本介绍。