📋 什么是媒体查询？

媒体查询允许我们根据设备的特性来应用不同的 CSS 样式规则。

："如果设备满足某个条件，就使用这套样式"

🔰 基础语法

@media 媒体类型 and {
/* CSS 规则 */
}

至于实用示例。

/* 当屏幕宽度 ≥ 768px 时生效 */
@media {
.container {
再看width，750px;}
}

媒体类型一览

/* 仅在屏幕上生效 */
@media screen {
body { font-family: 'Segoe UI',sans-serif;说起来，}
}
/* 仅在打印时隐藏元素 */
@media print {
.no-print { display: none;}
}

🎯 常用媒体特征

视口宽度和高度（最常用！)

/* 最小宽度 */
@media { }
/* 最大宽度 */
@media { }
/* 宽度范围 */
@media and { }
/* 视口高度 */
@media { }

屏幕方向

/* 竖屏 */
@media { }
/* 横屏 */
@media { }

高清屏幕

/* 设备像素比 ≥ 或 分辨率 ≥ 192dpi */
@media,{
.logo { background-image: url;}
}

交互特性（超实用！)

/* 支持悬停 */
@media {
.button:hover { background: #ff6600;}
}
/* 不支持悬停 */
@media {
.dropdown { /* ... */ }
}
/* 精细指针 */
@media {
.checkbox { width: 16px;}
}
/* 粗糙指针 */
@media {
.checkbox { width: 32px;/* 触摸目标要更大 */ }
}

📱 断点设计策略

移动优先 vs 桌面优先

• ✅ 推荐：移动优先

  
  /* 第一层：基础样式 */
  .container{width:%;padding:16px;}
  /* 第二层：平板 */
  @media{.container{width:720px;话说回来，padding24px;}}
  /* 第三层：桌面 */
  @media{.container{width:;按理说，padding32px;}}
  /* 第四层：大屏 */
  ...
  }

• ❌ 不推荐：桌面优先

  /* 从大屏幕开始，逐步缩小 */
  .container{width:;}
  /*@Media {...}*/
  `style="">

` `style="">` `style="">` `style="">` ` **常用断点参考表** <　 ` **使用者痛点**： - **页面在不同设备上显示不一致** – 若未设置正确断点或使用绝对单位，很容易出现布局错位。- **维护成本高** – 每新增一个浏览器或分辨率就需要再写一条规则，导致文件膨胀。- **开发效率低下** – 手动测试每个断点耗时长且易漏。通过统一标准断点、移动优先思路还有容器查询，可以显著降低这些痛点。

---

💡 高级技巧

🔧 逻辑运算符

css /* AND：同时满足多个条件 */ @mediaand{ .sidebar{display:flex;} } /* NOT：取反 */ @ media not{ .mobile-only{display:none;} } /* ONLY ：仅匹配指定媒体类型 */ @ media only screen and{...} /* OR ：任一条件满足即可 */ @ media。{...}

⚡ CSS 变量 + 媒体查询

css /* 根变量声明，移动端默认值*/ :root{ --font-size-base :14PX;--spacing-base :8PX;--columns :1;} @ media{ :root{ --font-size-base :16PX;--spacing-base :16PX;--columns :1;怎么说呢，} } body{ font-size:vAr;} .grid{ display:grid;grid-template-columns:rEPEAT,1FR);}

📦 容器查询

css .card-container{ container-type:inline-size;container-name card;} @container card{ .card{display:flex;flex-direction,row;} .card-image{width:%;怎么说呢，} } 容器查询解决了“视口依赖”带来的局限——子组件可根据父容器大小自适应。无需 编写全局 Media Query。

---

🛠️ 实战场景

🚀 响应式导航菜单

css .nav-links{ display:none; position:absolute;top:%，left:%;right:%，background:white;} .hamburger{ display:block;cursor:pointer;} @ media{ .nav-links{ display:flex;position.static;说起来，gap24Px，话说回来，background-transparent;} .hamburger{display:none;} }

📃 响应式网格布局

css .grid{ display:grid;gap16Px，grid-template-columns:auto;} @ media{.grid{grid-template-columns:rEPEAT;}} @ media{.grid{grid-template-columns:rEPEAT;gap24Px，}}

🌑 深色模式适配

css /* 基础样式*/ ::root{ --bg-color:#ffffff;--text-color:#000000;} /* 程序深色模式*/ @ media{ ::root{-bg-color:#1a1a1a;不过，-text-color:#f0f0f0;} } /* 手动切换*/ { --bg-color:#1a1a1a;老实说，-text-color:#f0f0f0;}

🎬 无障碍：减少动画

css /* 使用者偏好"减少动画"时关闭所有动画与过渡*/ @ media{ 从*。*:来看，before,*::after{ animation-duration:.01ms!important，animation-iteration-count:notSet!important，transition-duration:.01ms!important，}}

---

📊 浏览器兼容性

断点	设备类型	典型尺寸
<576  px	📱 手机竖屏320‑375  px	...
576‑768  px	📱 手机横 / 小平板576‑667  px
768‑992  px	📲 平板768‑1024  px
992‑1200  px	💻 小桌面992‑1366  px
>1200  px `…

特性	Chrome	Firefox	Safari	Edge
基础媒体查询	✅	✅	✅	✅
orientation	✅	✅	✅	✅
hover/pointer	✅	✅	✅	✅
prefers-color-scheme	✅	✅	✅	✅
prefers-reduced-motion	✅	✅	✅	✅
容器查询	🔧?✅，⚠️?✋，✔️?✅，

---

⚠️ 常用方法 & 常见错误

• - **移动优先** → 从最小尺寸开始编写样式，接下来按需提高。
• - 使用相对单位 而非固定像素。其实，
• - 避免过多精细断点；坚持主流标准断点即可，
• - 在真实设备上测试；模拟器往往忽略硬件差异，
• - 切勿把所有逻辑写进单个巨大的 Media Query；拆分为模块化类更易维护，
• - 对于交互体验差异，用 `hover` / `pointer` 检测并分别调整。
• - 在需要深色模式时结合 `prefers-color-scheme` 与自定义主题切换。
• - 对无障碍友好者，加入 `prefers-reduced-motion` 判断。
• - 如果项目中出现 “容器太窄导致内容被裁剪”，考虑使用 Container Queries 或 Flexbox 的弹性属性进行微调。
• - 避免在同一文件中混合大量硬编码 pixel 值；统一管理可让团队协作更顺畅。

---

🎯

• 主要概念理解 的作用与 min/max-* 的逻辑。
• 关键技术移动优先、相对单位、逻辑运算符、CSS 变量、Container Queries。其实，
• 使用者痛点方法
  • 页面在各终端崩溃 → 标准化断点 + 移动优先；
  • 样式重复与冗余 → 使用变量 + 模块化类；怎么说呢，
  • 效率低 → 自动化工具或框架预设斜杠。

掌握上述知识后你就能轻松建立兼容多终端、高可维护性的响应式网站，并随时应对新兴技术与使用者需求。