必须在<head>中写<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则@media规则在移动端基本失效；断点应基于内容自然断裂点（如623px、892px）而非设备尺寸，推荐移动优先+min-width递进式写法，统一CSS文件中用@media嵌套，避免拆分加载。
必须先写 <meta name="viewport" content="width=device-width, initial-scale=1.0">，否则所有 @media 规则在移动端基本不生效。
viewport 标签写错，媒体查询就等于没写
很多页面在手机上缩成一团、文字小得看不清、点击区域错位——不是 CSS 写得不对，是 <meta> 标签缺失或写成了 width=1200、user-scalable=no 这类禁用缩放的配置。iOS Safari 下 maximum-scale=1.0 会让双击放大失效，直接损害可访问性。
正确写法只有一条，且必须放在 <head> 里：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 不要加
maximum-scale或user-scalable - 不要用
device-width做媒体查询条件（max-device-width已被弃用） - 这个标签不是“可选”，它是媒体查询在移动设备上起效的硬性前提
断点别抄 iPhone 尺寸，盯住内容什么时候“开始难看”
写 @media (max-width: 768px) 并不意味着“适配 iPad”，它只是告诉浏览器：“当视口宽度 ≤ 768px 时应用这些样式”。但真实场景中，一行三个卡片在 623px 才开始换行，导航栏文字在 685px 才挤成两行——这些才是你该记下的断点。
立即学习“前端免费学习笔记（深入）”；
推荐做法：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 打开 Chrome DevTools 的响应式模式，拖动宽度滑块，实时观察布局断裂点
- 记下自然折行/溢出/阅读困难的像素值（如 623px、892px），再向上取整为 640px、900px 等易维护值
- 全局断点控制在 3–4 个：480px（窄屏）、768px（平板竖屏临界）、1024px（小桌面）、1200px（宽屏）已覆盖 90% 场景
- 避免混用
max-width和min-width，比如同时写(max-width: 767px)和(min-width: 768px)，在 767.5px（如缩放 110% 的 iPad）下会留白失效
移动优先 + min-width 递进，比 max-width 套娃更可控
基础样式（小屏）直接写在媒体查询外面，大屏样式用 @media (min-width: 768px) 逐级增强。这样逻辑线性、调试清晰，也天然规避了层叠顺序混乱的问题。
错误写法（容易覆盖错、难维护）：
@media (max-width: 767px) { .card { width: 100%; } }
@media (max-width: 1023px) { .card { width: 50%; } }
@media (max-width: 1199px) { .card { width: 33.33%; } }
推荐写法（移动优先，顺序即优先级）：
.card { width: 100%; }
@media (min-width: 768px) { .card { width: 50%; } }
@media (min-width: 1024px) { .card { width: 33.33%; } }
@media (min-width: 1200px) { .card { width: 25%; } }
- 所有基础样式不包
@media，默认作用于最小屏幕 - 后续规则按
min-width递增，后写的自然覆盖前写的 - 不用
!important强行覆盖，那说明结构已经失控 - 如果要用 CSS 变量（
--color-primary），记得在每个媒体查询里都重新赋值，否则颜色不会随布局一起变
媒体查询写在哪？CSS 文件里，别拆成多个 <link>
把不同断点样式拆到 mobile.css、desktop.css 里，再用 <link media="screen and (max-width: 768px)"> 加载，看似清晰，实则埋雷：
- 触发多次 HTTP 请求，影响首屏速度
- 多个文件间 CSS 选择器权重难控，极易覆盖遗漏
- 无法利用浏览器对单个 CSS 文件的缓存复用
正确做法是统一收口在主 CSS 文件中，用 @media 嵌套规则。若项目极复杂，可考虑 @layer 分组（需检查目标浏览器支持度），例如：
@layer base {
.header { font-size: 16px; }
}
@layer desktop {
@media (min-width: 1024px) {
.header { font-size: 20px; }
}
}
最后提醒一句：媒体查询本身不提升选择器权重，它只是条件包裹。样式是否生效，最终取决于源码书写顺序和选择器特异性——这点最容易被忽略，也最常引发“明明写了却没反应”的问题。
