zh/html_css_blog/tutorials/css-media-queries

CSS 媒体查询是响应式设计的重要组成部分，它允许开发者根据不同的设备特性应用不同的样式规则。以下是一些关于 CSS 媒体查询的基础知识和使用技巧。

媒体查询简介

媒体查询（Media Queries）是 CSS3 中的一个特性，它允许开发者根据设备的屏幕尺寸、分辨率、颜色深度等特性来应用不同的样式。这为创建适应各种设备的网页提供了极大的便利。

媒体查询的基本语法

@media screen and (min-width: 600px) {
  /* CSS 样式 */
}

在上面的例子中，@media 关键字后面跟着一个或多个媒体特性，这些特性之间用空格分隔。大括号内是针对该媒体特性应用的一组 CSS 样式。

常用媒体特性

screen: 指屏幕设备。
min-width: 设备宽度最小值。
max-width: 设备宽度最大值。
orientation: 设备方向，如 portrait（纵向）和 landscape（横向）。
resolution: 设备像素比。

实例：响应式布局

假设我们想要创建一个响应式布局，当屏幕宽度小于 600px 时，显示两列布局，当屏幕宽度大于或等于 600px 时，显示三列布局。

.container {
  display: flex;
}

.column {
  flex: 1;
  padding: 10px;
}

@media screen and (min-width: 600px) {
  .container {
    flex-direction: row;
  }

  .column {
    flex: 1;
  }
}

在上面的例子中，当屏幕宽度小于 600px 时，.container 元素的 flex-direction 属性为 column，使得 .column 元素垂直排列。当屏幕宽度大于或等于 600px 时，.container 元素的 flex-direction 属性为 row，使得 .column 元素水平排列。

扩展阅读

想要了解更多关于 CSS 媒体查询的知识，请访问本站的 CSS 媒体查询教程。