媒体查询（Media Queries）

媒体查询是 CSS 提供的一种强大功能，用于根据不同的设备特性（如屏幕宽度、高度、方向、分辨率等）来应用不同的样式。它是实现响应式与自适应设计的核心工具之一。

基本语法

@media media-type and (condition) {
  /* CSS 规则 */
}

常见媒体类型

• all：适用于所有设备（默认）
• screen：适用于屏幕设备
• print：适用于打印预览模式
• speech：适用于屏幕阅读器

常见条件属性

• max-width：最大宽度
• min-width：最小宽度
• max-height / min-height
• orientation：屏幕方向（portrait 或 landscape）
• resolution：屏幕分辨率

示例：常用断点样式

/* 手机 */
@media (max-width: 767px) {
  body {
    background: #f9f9f9;
  }
}

/* 平板 */
@media (min-width: 768px) and (max-width: 1023px) {
  body {
    background: #e0e0e0;
  }
}

/* 桌面 */
@media (min-width: 1024px) {
  body {
    background: #ffffff;
  }
}

媒体查询的组合用法

@media screen and (min-width: 768px) and (orientation: portrait) {
  /* 针对竖屏平板 */
}

媒体查询嵌套（Sass 示例）

.container {
  padding: 16px;

  @media (min-width: 768px) {
    padding: 32px;
  }
}

使用建议

• 采用 移动优先（min-width）策略：从小屏幕开始构建，再逐步增强
• 统一管理断点，避免混乱（可定义为变量）
• 与网格系统、弹性布局配合使用效果更佳