设备特性的媒体查询

媒体查询是CSS中用于根据设备特性应用不同样式规则的技术。通过检测视口宽度、屏幕方向、分辨率等特性，可以创建响应式设计，确保网站在各种设备上都能良好显示。

媒体查询基础语法

媒体查询使用@media规则，基本语法结构如下：

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

媒体类型可以是all、print、screen或speech。最常用的是screen，表示屏幕设备。

常用设备特性查询

视口宽度查询

最常用的媒体特性是视口宽度，可以创建响应式布局断点：

/* 小屏幕设备 */
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

/* 中等屏幕设备 */
@media (min-width: 601px) and (max-width: 1024px) {
  body {
    font-size: 16px;
  }
}

/* 大屏幕设备 */
@media (min-width: 1025px) {
  body {
    font-size: 18px;
  }
}

设备方向查询

可以根据设备方向调整布局：

/* 竖屏模式 */
@media (orientation: portrait) {
  .sidebar {
    display: none;
  }
}

/* 横屏模式 */
@media (orientation: landscape) {
  .sidebar {
    display: block;
    width: 250px;
  }
}

分辨率查询

针对高分辨率设备提供更清晰的图像：

/* 普通分辨率 */
.logo {
  background-image: url('logo.png');
}

/* 高分辨率设备 */
@media (-webkit-min-device-pixel-ratio: 2), 
       (min-resolution: 192dpi) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: contain;
  }
}

高级媒体特性

颜色相关特性

/* 检测设备是否支持彩色显示 */
@media (color) {
  .colorful {
    display: block;
  }
}

/* 检测色深 */
@media (min-color: 8) {
  .high-color {
    background-image: url('gradient-hq.png');
  }
}

交互能力检测

/* 检测设备是否支持悬停 */
@media (hover: hover) {
  .menu-item:hover {
    background-color: #f0f0f0;
  }
}

/* 检测设备是否支持精确指针(如鼠标) */
@media (pointer: fine) {
  .small-buttons {
    display: block;
  }
}

组合多个条件

媒体查询支持逻辑运算符and、,(或)和not：

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

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

/* 非触摸设备 */
@media not (pointer: coarse) {
  .hover-effects {
    opacity: 1;
    transition: opacity 0.3s;
  }
}

现代CSS中的媒体查询改进

范围语法

CSS Media Queries Level 4引入了更简洁的范围语法：

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

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

自定义属性与媒体查询

结合CSS变量创建更灵活的响应式设计：

:root {
  --base-font-size: 16px;
  --spacing-unit: 1rem;
}

@media (min-width: 768px) {
  :root {
    --base-font-size: 18px;
    --spacing-unit: 1.5rem;
  }
}

body {
  font-size: var(--base-font-size);
  margin: var(--spacing-unit);
}

实际应用示例

响应式导航栏

.nav {
  display: flex;
  flex-direction: row;
}

.nav-item {
  padding: 1rem;
}

@media (max-width: 768px) {
  .nav {
    flex-direction: column;
  }
  
  .nav-item {
    padding: 0.5rem;
    border-bottom: 1px solid #ddd;
  }
}

自适应网格布局

.grid {
  display: grid;
  gap: 1rem;
}

/* 1列(默认) */

@media (min-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

性能考虑

虽然媒体查询非常有用，但过度使用可能影响性能：

1. 避免在媒体查询中重复定义大量相同属性
2. 使用移动优先策略，从小屏幕开始然后添加大屏幕样式
3. 合并相似的媒体查询以减少CSS文件大小

/* 不推荐 - 重复属性 */
@media (max-width: 600px) {
  .box { color: red; }
  .title { font-size: 1.2rem; }
}

@media (max-width: 400px) {
  .box { color: red; }
  .title { font-size: 1rem; }
}

/* 推荐 - 合并相似查询 */
@media (max-width: 600px) {
  .box { color: red; }
  
  .title {
    font-size: 1.2rem;
  }
  
  @media (max-width: 400px) {
    .title {
      font-size: 1rem;
    }
  }
}

浏览器兼容性

大多数现代浏览器都支持媒体查询，但需要注意：

• 旧版IE(8及以下)不支持媒体查询
• 某些新特性如范围语法需要较新浏览器版本
• 使用Autoprefixer等工具可以处理部分兼容性问题

可以通过特性查询检测媒体查询支持：

@supports not (display: grid) {
  /* 不支持CSS Grid的备用样式 */
}

媒体查询与容器查询

CSS Container Queries是更新的技术，允许基于容器尺寸而非视口尺寸应用样式：

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

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

虽然容器查询更灵活，但媒体查询仍然是响应式设计的基石，特别是在处理整体布局时。