媒体查询的基本语法

媒体查询的基本语法

媒体查询是CSS3引入的强大功能，允许根据设备特性（如视口宽度、屏幕方向或分辨率）应用不同的样式规则。其核心语法由@media规则构成，后面跟随媒体类型和媒体特性表达式。

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

媒体类型

媒体类型指定查询适用的设备类别，常见类型包括：

• all：所有设备（默认值）
• screen：彩色屏幕设备
• print：打印预览模式
• speech：语音合成器

@media print {
  body {
    font-size: 12pt;
    color: black;
  }
  .sidebar {
    display: none;
  }
}

媒体特性表达式

媒体特性通过逻辑运算符组合，常用特性包括：

• width/height：视口尺寸
• min-width/max-width：最小/最大视口宽度
• orientation：方向（portrait/landscape）
• resolution：设备分辨率
• aspect-ratio：宽高比

/* 当视口宽度至少为768px时应用 */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

/* 横屏设备且宽度大于1024px */
@media (orientation: landscape) and (min-width: 1024px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

逻辑运算符

媒体查询支持三种逻辑运算符：

1. and：同时满足多个条件
2. ,（逗号）：相当于OR运算
3. not：否定整个查询

/* 宽度在600px到900px之间 */
@media (min-width: 600px) and (max-width: 900px) {
  .card {
    flex-basis: 50%;
  }
}

/* 打印机或屏幕宽度小于480px */
@media print, (max-width: 480px) {
  .ad-banner {
    display: none;
  }
}

/* 非屏幕设备 */
@media not screen {
  .interactive-element {
    visibility: hidden;
  }
}

常见断点设置

虽然具体断点应根据内容决定，但常见参考值包括：

/* 超小设备（手机，小于576px） */
@media (max-width: 575.98px) { ... }

/* 小设备（平板，≥576px） */
@media (min-width: 576px) { ... }

/* 中等设备（桌面，≥768px） */
@media (min-width: 768px) { ... }

/* 大设备（大桌面，≥992px） */
@media (min-width: 992px) { ... }

/* 超大设备（≥1200px） */
@media (min-width: 1200px) { ... }

现代CSS中的改进

CSS4草案引入了范围上下文语法，简化了宽度区间的表示：

/* 传统写法 */
@media (min-width: 600px) and (max-width: 1200px) { ... }

/* 新范围语法 */
@media (600px <= width <= 1200px) { ... }

嵌套媒体查询

媒体查询可以嵌套在CSS规则中，减少代码重复：

.card {
  padding: 1rem;
  
  @media (min-width: 768px) {
    padding: 2rem;
    display: flex;
  }
}

实际应用示例

响应式导航栏的实现：

.nav {
  display: block;
  background: #333;
}

.nav-item {
  display: block;
  padding: 10px;
  color: white;
}

@media (min-width: 768px) {
  .nav {
    display: flex;
  }
  .nav-item {
    flex: 1;
    text-align: center;
  }
}

性能注意事项

1. 避免过多媒体查询导致样式表臃肿
2. 使用em代替px可获得更好的可访问性
3. 移动优先原则通常更高效：

/* 移动优先写法 */
.base-styles {
  /* 移动端样式 */
}

@media (min-width: 768px) {
  /* 平板样式 */
}

@media (min-width: 1024px) {
  /* 桌面样式 */
}

浏览器支持与检测

现代浏览器普遍支持媒体查询，但旧版IE可能需要polyfill。可以通过JavaScript检测媒体查询：

const mediaQuery = window.matchMedia('(min-width: 768px)');

function handleTabletChange(e) {
  if (e.matches) {
    console.log('屏幕宽度≥768px');
  }
}

mediaQuery.addListener(handleTabletChange);
handleTabletChange(mediaQuery);

高级特性应用

1. 根据 prefers-color-scheme 适配暗黑模式：

@media (prefers-color-scheme: dark) {
  body {
    background: #121212;
    color: #f0f0f0;
  }
}

2. 根据 prefers-reduced-motion 减少动画：

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

3. 高分辨率设备适配：

@media 
  (-webkit-min-device-pixel-ratio: 2),
  (min-resolution: 192dpi) {
    .logo {
      background-image: url('logo@2x.png');
    }
  }

媒体查询与容器查询

CSS容器查询是新兴技术，允许基于父容器而非视口应用样式：

.component {
  container-type: inline-size;
}

@container (min-width: 500px) {
  .component {
    /* 容器宽度≥500px时的样式 */
  }
}