媒体查询语法

媒体查询（Media Queries）是响应式网页设计的核心工具，允许根据用户的设备条件（如屏幕宽度、方向等）定义不同的样式规则。

1. 基本语法

@media 条件 {
  /* 仅当条件满足时才会应用的样式 */
}

示例：

@media (max-width: 768px) {
  body {
    background-color: #f0f4c3;
  }
}

当浏览器宽度小于等于 768px 时，页面背景色会变为浅绿色。

2. 常见条件

条件	示例	说明
max-width	(max-width: 768px)	最大宽度，小于等于时匹配
min-width	(min-width: 1024px)	最小宽度，大于等于时匹配
orientation	(orientation: landscape)	横屏或竖屏方向
max-height	(max-height: 600px)	最大高度

3. 组合条件

可以使用 and、,（逗号）来组合多个条件：

@media (min-width: 600px) and (max-width: 1200px) {
  .container {
    padding: 40px;
  }
}

媒体查询示例

loading