媒体查询 @media

1. 屏幕尺寸查询

/* 最大宽度 */
@media (max-width: 768px) {
}

/* 最小宽度 */
@media (min-width: 768px) {
}

/* 宽度范围 */
@media (min-width: 768px) and (max-width: 1024px) {
}

/* 高度查询 */
@media (min-height: 600px) {
}

2. 屏幕类型

/* 屏幕设备 */
@media screen {
}

/* 打印设备 */
@media print {
}

/* 所有设备 */
@media all {
}

/* 语音合成器 */
@media speech {
}

3. 设备方向

/* 横向 */
@media (orientation: landscape) {
}

/* 纵向 */
@media (orientation: portrait) {
}

4. 显示比例

/* 设备像素比 */
@media (-webkit-device-pixel-ratio: 2), (min-resolution: 192dpi) {
}

/* 宽高比 */
@media (aspect-ratio: 16/9) {
}

5. 多条件组合

/* 与操作 */
@media screen and (min-width: 768px) {
}

/* 或操作 */
@media screen, print {
}

/* 非操作 */
@media not screen {
}

6. 暗黑模式

/* 系统级暗黑模式 */
@media (prefers-color-scheme: dark) {
}

/* 系统级亮色模式 */
@media (prefers-color-scheme: light) {
}

7. 动画相关

/* 用户不喜欢动画 */
@media (prefers-reduced-motion: reduce) {
}

8. 常见断点示例

/* 移动优先的响应式设计 */
/* 默认样式针对手机 */

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

/* 小型桌面 */
@media (min-width: 992px) {
}

/* 大型桌面 */
@media (min-width: 1200px) {
}

9. 嵌套查询 (新特性)

.container {
  /* CSS 嵌套媒体查询 */
  @media (min-width: 768px) {
    /* 样式 */
  }
}

10. 容器查询 (新特性)

/* 相对于容器尺寸的查询 */
@container (min-width: 400px) {
  /* 样式 */
}

实际应用示例

/* 综合示例 */
/* 基础移动端样式 */
.card {
  width: 100%;
  padding: 1rem;
}

/* 平板及以上 */
@media screen and (min-width: 768px) {
  .card {
    width: 50%;
  }
}

/* 打印样式 */
@media print {
  .card {
    /* 打印时隐藏某些元素 */
    display: none;
  }
}

/* 暗色模式 */
@media (prefers-color-scheme: dark) {
  .card {
    background: #333;
    color: #fff;
  }
}

最佳实践

1. 使用移动优先的设计方法
2. 选择合适的断点
3. 避免过多的媒体查询
4. 使用语义化的断点变量
5. 考虑设备特性而不仅仅是尺寸