你有没有打开过一个网站，在电脑上看得好好的，一到手机上就文字重叠、按钮点不到、图片跑出屏幕？
那是因为这个网站没有做适配不同设备的处理。

而解决这个问题的关键工具，就是 CSS 里的 @media 查询（Media Queries）。

今天我们就用最接地气的方式，带你搞懂 @media 是什么、怎么用，以及如何让你的网页在手机、平板、电脑上都看起来舒服又专业。

---

一、先说人话：@media 到底是干啥的？

你可以把它理解成 CSS 的“条件判断”。

“如果屏幕宽度小于 768px，就用这一套样式；否则，用另一套。”

就像你出门前看天气：

• 如果下雨 → 带伞
• 如果晴天 → 戴墨镜

@media 就是让 CSS “看设备尺寸”，然后“换衣服”。

---

二、基本语法：长什么样？

@media (条件) {
  /* 在满足条件时生效的样式 */
}

最常见的条件是 屏幕宽度（width），比如：

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

意思是：当屏幕宽度 ≤ 768px（比如手机或小平板）时，字体变小一点。

---

三、常用写法详解

1. max-width：最大宽度（窄屏生效）

适用于“默认为桌面样式，窄屏时覆盖”

/* 默认：桌面样式 */
.container {
  width: 1200px;
  margin: 0 auto;
}

/* 手机和平板：宽度不超过 768px 时 */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 16px;
  }
}

✅ 这是最常用的写法，叫“移动优先”的反向写法（后面会讲）。

---

2. min-width：最小宽度（宽屏生效）

适用于“默认为手机样式，大屏时增强”

/* 默认：手机样式 */
.card {
  padding: 8px;
}

/* 平板及以上（≥768px） */
@media (min-width: 768px) {
  .card {
    padding: 16px;
  }
}

/* 桌面（≥1024px） */
@media (min-width: 1024px) {
  .card {
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
}

这种写法叫 “移动优先（Mobile First）” —— 先写手机样式，再逐步增强大屏体验。

💡 建议新手从 max-width 开始，更直观；熟练后推荐用 min-width，性能更好。

---

3. 常见断点（Breakpoints）参考

虽然没有绝对标准，但业界常用这几个尺寸：

设备类型	常用断点
手机竖屏	max-width: 480px
手机横屏 / 小平板	max-width: 768px
平板横屏	max-width: 1024px
桌面	默认样式

你可以这样组合：

/* 手机 */
@media (max-width: 480px) { ... }

/* 平板及以下 */
@media (max-width: 768px) { ... }

/* 桌面以上 */
@media (min-width: 1025px) { ... }

📌 注意：避免写太多断点！一般 2~3 个就够用，重点是内容是否合理，不是像素完美。

---

四、实战例子：改造一个卡片布局

假设我们有这样一个卡片：

<div class="card">
  <h3>标题</h3>
  <p>这是一段描述文字……</p>
  <button>点击</button>
</div>

默认样式（桌面）：

.card {
  width: 300px;
  padding: 20px;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

问题：在手机上太宽了！

解决方案：用 @media 调整

/* 默认是桌面样式 */

/* 手机上让卡片占满宽度，并缩小内边距 */
@media (max-width: 768px) {
  .card {
    width: 100%;
    padding: 12px;
  }

  h3 {
    font-size: 18px;
  }

  button {
    padding: 8px 16px;
  }
}

现在，无论在电脑还是手机，卡片都能自适应！

---

五、不止宽度！@media 还能查什么？

虽然最常用的是宽度，但 @media 还支持很多其他条件：

条件	用途
min-height / max-height	根据屏幕高度调整（适合全屏页面）
orientation: portrait	竖屏设备
orientation: landscape	横屏设备
prefers-color-scheme: dark	用户开启了深色模式！
hover: hover	设备支持鼠标悬停（区分手机和电脑）

彩蛋：实现深色模式自动切换！

/* 默认浅色 */
body {
  background: white;
  color: black;
}

/* 如果用户系统是深色模式 */
@media (prefers-color-scheme: dark) {
  body {
    background: #121212;
    color: #f0f0f0;
  }
}

不需要 JS，纯 CSS 就能适配系统主题！是不是很酷？

---

六、常见误区 & 小贴士

❌ 误区1：只用 @media 缩放字体

响应式不只是改大小，更要重新思考布局。比如导航栏在手机上可能要变成汉堡菜单。

❌ 误区2：写太多精确像素

不要写 @media (max-width: 767px)，而要用 768px 这样的整数，更易维护。

✅ 小技巧：在浏览器里调试

Chrome DevTools 的设备模拟器（按 F12 → Toggle device toolbar）可以实时拖动窗口，看到 @media 如何生效。

---

七、总结：一句话记住它

@media 就是 CSS 的“智能开关”——根据设备特性，自动切换最适合的样式。

它不是魔法，而是一种思维方式：你的网页不该只在一个屏幕上好看，而要在各种设备上都可用、好用。

---

八、动手试试！

1. 打开你自己的网页项目
2. 加一个 @media (max-width: 768px) 规则
3. 把某个容器的 width: 800px 改成 width: 100%
4. 用浏览器缩放窗口，看看效果！

你会发现，原来做响应式并没有想象中那么难。

从今天起，别再让用户在手机上“左右滑动看网页”了——用 @media，给他们一个真正友好的体验吧！📱💻✨