CSS 媒体查询教程

媒体查询是 CSS3 中的一个重要特性，它允许开发者根据不同的设备特性（如屏幕尺寸、分辨率等）来应用不同的样式规则。下面将介绍 CSS 媒体查询的基本用法和常见场景。

媒体查询语法

媒体查询的基本语法如下：

@media media-type and (expression) {
  /* CSS 样式规则 */
}

其中，media-type 表示媒体类型，如 screen（屏幕）、print（打印）等；expression 是一个条件表达式，用于指定触发媒体查询的条件，如 min-width: 600px 表示当屏幕宽度大于或等于 600 像素时，应用样式规则。

常见媒体查询示例

屏幕宽度

@media screen and (min-width: 600px) {
  body {
    background-color: #f0f0f0;
  }
}

当屏幕宽度大于或等于 600 像素时，背景颜色将变为浅灰色。

分辨率

@media screen and (min-resolution: 192dpi) {
  body {
    font-size: 20px;
  }
}

当屏幕分辨率为 192dpi 时，字体大小将变为 20 像素。

媒体特性

@media screen and (orientation: landscape) {
  body {
    background-image: url('background_landscape.jpg');
  }
}

当屏幕方向为横屏时，背景图片将更换为 background_landscape.jpg。

媒体查询与响应式设计

媒体查询是响应式设计的基础，通过合理使用媒体查询，可以实现网页在不同设备上的良好展示。以下是一个简单的响应式设计示例：

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
  }
}

当屏幕宽度小于或等于 768 像素时，容器宽度将变为 100%，实现手机端的全屏显示。

扩展阅读

想要了解更多关于 CSS 媒体查询的知识，可以阅读以下文章：

• CSS 媒体查询教程

希望这篇教程能帮助您更好地理解 CSS 媒体查询。🎉