媒体查询高级技巧

/* 媒体查询基本语法 */
@media media-type and (media-feature: value) {
  /* 条件成立时应用的样式 */
}

/* 常用示例：屏幕宽度小于768px */
@media screen and (max-width: 768px) {
  .container { padding: 10px; }
}

/* 常见媒体类型：all, screen, print, speech */

/* AND：所有条件同时满足 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* 平板设备 */
}

/* OR（逗号分隔）：任一条件满足即可 */
@media (max-width: 480px), (orientation: portrait) {
  /* 小屏设备或竖屏模式 */
}

/* NOT：取反条件 */
@media not screen and (color) {
  /* 非彩色屏幕设备（如黑白打印机） */
}

/* 视口尺寸 */
(max-width: 600px)
(min-height: 800px)
(aspect-ratio: 16/9)

/* 屏幕方向 */
(orientation: portrait)
(orientation: landscape)

/* 分辨率（DPI / DPPX） */
(resolution: 2dppx)
(min-resolution: 192dpi)

/* 交互方式 */
(hover: hover) /* 支持悬停 */
(pointer: fine) /* 精确指针（鼠标） */
(pointer: coarse) /* 粗略指针（触屏） */

/* 颜色能力 */
(color) /* 支持彩色 */
(color-gamut: p3) /* 广色域 */

/* 移动优先（Mobile First）策略 */
/* 基础样式：针对移动端 */
.container { padding: 16px; }

/* 平板：≥ 768px */
@media (min-width: 768px) {
  .container { padding: 24px; }
}

/* 桌面：≥ 1024px */
@media (min-width: 1024px) {
  .container { padding: 40px; }
}

/* 大屏：≥ 1440px */
@media (min-width: 1440px) {
  .container { max-width: 1200px; }
}

/* 定义容器 */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* 容器查询：当容器宽度 ≥ 400px 时 */
@container card (min-width: 400px) {
  .card {
    display: flex;
    gap: 20px;
  }
  .card .thumbnail {
    width: 120px;
  }
}

/* 容器查询：当容器宽度 ≥ 600px 时 */
@container card (min-width: 600px) {
  .card .thumbnail {
    width: 160px;
  }
}

/* 使用 srcset + sizes */
<img
  srcset="image-320.jpg 320w,
         image-640.jpg 640w,
         image-1024.jpg 1024w"
  sizes="(max-width: 600px) 100vw, 50vw"
  src="image-640.jpg"
  alt="响应式图片示例"
/>

/* 使用 picture 元素做艺术指导 */
<picture>
  <source media="(max-width: 600px)" srcset="portrait.jpg" />
  <source media="(min-width: 601px)" srcset="landscape.jpg" />
  <img src="fallback.jpg" alt="响应式图片" />
</picture>

/* 使用 clamp() 实现流体排版 */
h1 {
  font-size: clamp(1.5rem, 4vw, 3.5rem);
  line-height: clamp(1.3, 1.5, 1.8);
}

p {
  font-size: clamp(1rem, 2vw, 1.25rem);
  max-width: 70ch; /* 最佳阅读宽度 */
}

/* 使用媒体查询精细化调整 */
@media (max-width: 480px) {
  h1 { font-size: 1.8rem; }
  p { font-size: 0.95rem; }
}

/* Flexbox 响应式 */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.flex-item {
  flex: 1 1 200px;
}

/* Grid 响应式 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

/* 媒体查询调整 Grid 列数 */
@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

/* CSS 数学函数 */
.box {
  width: max(300px, 50%);
  height: min(400px, 80vh);
  padding: clamp(1rem, 3vw, 2rem);
}

/* CSS 自定义属性 + 媒体查询 */
:root {
  --spacing: 16px;
  --font-size-base: 1rem;
}
@media (min-width: 768px) {
  :root {
    --spacing: 24px;
    --font-size-base: 1.125rem;
  }
}

/* 环境变量 (env) */
.safe-area {
  padding: env(safe-area-inset-top) env(safe-area-inset-right);
}

/* Chrome DevTools 响应式调试 */
// 1. 打开 DevTools (F12)
// 2. 点击 "Toggle device toolbar" (Ctrl+Shift+M)
// 3. 选择预设设备或自定义尺寸
// 4. 使用 "Rulers" 查看视口尺寸
// 5. 使用 "Show media queries" 查看断点

/* 在 CSS 中调试媒体查询 */
@media (max-width: 768px) {
  body::after {
    content: "📱 移动端";
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    z-index: 9999;
  }
}