CSS媒体查询

媒体查询允许根据设备宽度、高度、分辨率等特性应用不同样式，是响应式布局的基础。

基本语法

@media (条件) {
  /* 样式规则 */
}

常用媒体特性

断点示例

/* 移动端优先 */
.container {
  width: 100%;
}

/* 平板 */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

/* 桌面 */
@media (min-width: 1024px) {
  .container {
    width: 960px;
  }
}

/* 大屏 */
@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}

逻辑操作符

/* 且 - 同时满足 */
@media (min-width: 768px) and (max-width: 1023px) {
  .box { display: block; }
}

/* 或 - 满足其一 */
@media (max-width: 767px), (min-width: 1200px) {
  .box { display: none; }
}

/* 非 - 取反 */
@media not (max-width: 767px) {
  .box { display: flex; }
}

嵌套使用

/* 与屏幕方向结合 */
@media (min-width: 768px) and (orientation: landscape) {
  .sidebar {
    width: 300px;
  }
}

/* 检测深色模式 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #ffffff;
  }
}

注意：断点值应根据实际设计需求设定，而非盲目套用设备尺寸。

要点总结

• 使用 min-width 采用移动优先策略
• 常用断点：768px（平板）、1024px（桌面）、1200px（大屏）
• 逻辑操作符：and、,（或）、not
• 可检测屏幕方向、分辨率、配色偏好等特性