CSS 媒体查询介绍

媒体查询是 CSS3 中的一项强大功能，它允许开发者根据不同的设备特性来应用不同的样式规则。以下是一些关于 CSS 媒体查询的基础知识和使用方法。

媒体查询的基本语法

@media media-type and (expression) {
  CSS-代码块;
}

其中，media-type 表示媒体类型，如 screen、print 等；expression 是一个表达式，用于判断是否应用该代码块，通常包含设备特性，如宽度、高度、分辨率等。

常用的媒体特性

• 宽度 (width)：用于设置视口的宽度。
• 高度 (height)：用于设置视口的高度。
• 设备宽度 (device-width)：用于设置设备的宽度。
• 设备高度 (device-height)：用于设置设备的高度。
• 分辨率 (resolution)：用于设置设备的分辨率。

实例

以下是一个简单的示例，用于根据屏幕宽度应用不同的样式：

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

在这个例子中，当屏幕宽度小于或等于 600px 时，body 的背景颜色会变为浅蓝色。

扩展阅读

想要了解更多关于 CSS 媒体查询的信息，可以访问我们的 CSS 媒体查询教程。

图片示例

手机屏幕

桌面屏幕

打印预览