响应式设计的核心是viewport标签和CSS媒体查询的正确配合：必须添加<meta name="viewport" content="width=device-width, initial-scale=1.0">，媒体查询需用min-width递进式断点（如768px、1024px），写在CSS中而非HTML或JS里。
媒体查询本身不产生响应式效果，它只是开关；真正起作用的是你写在里面的 CSS 规则——没配 width: 100%、flex-wrap 或 grid-template-columns，@media 就是空壳。
必须先写 <meta name="viewport" content="width=device-width, initial-scale=1.0">
这是硬性前提，不是可选项。漏掉或写错，@media 在移动端基本不生效。
-
width=device-width让视口宽度匹配设备逻辑像素，initial-scale=1.0防止 iOS Safari 双击放大失效 - 写成
width=1200或加user-scalable=no，会导致页面缩成一团、文字看不清、点击区域错位 - 验证方式：Chrome DevTools 切 iPhone 模拟器后，检查
document.documentElement.clientWidth是否接近 390（iPhone 13）或 430（iPhone 15 Pro）
用 width，别用 device-width
device-width 在现代项目里基本是坑，width 才是事实标准。
-
width对应<meta>设置后的逻辑视口宽度，稳定可预期 -
device-width是物理像素 ÷devicePixelRatio的结果，横竖屏切换时值会跳变（比如 iPad 横屏后反而比竖屏小） - 安卓部分旧浏览器根本不支持
device-width查询 - 错误写法：
@media screen and (max-device-width: 768px)；正确写法：@media screen and (max-width: 768px)
统一用 min-width 递进，别混用 max-width 和 min-width
混用极易导致断点覆盖、留白失效，尤其在缩放场景下（如 iPad 缩放 110% 时宽度为 767.5px）。
立即学习“前端免费学习笔记（深入）”；
- 推荐结构：基础样式直接写（0–767px），大屏用
@media (min-width: 768px)、@media (min-width: 1024px)逐级增强 - 避免写
@media (max-width: 767px)和@media (min-width: 768px)并列——临界值 767.5px 两者都不命中 - 断点数量控制在 3–4 个：480px（窄屏极限）、768px（内容开始舒展）、1024px（小桌面）、1200px（宽屏）已覆盖 90% 场景
- 断点数值别抄设备型号（如 390px、430px），盯住内容“开始难看”的瞬间，比如卡片换行在 623px，就取整为 640px
@media 必须写在 CSS 中，不能塞进 HTML 或 JS
浏览器只解析 CSS 文件、<style> 标签内部或内联 style 属性里的 @media 块。
- 错误：把
@media (max-width: 768px) { }当字符串写进 JS 变量，比如const mq = "@media";—— 完全无效 - 错误：在 HTML 标签上加
media=""属性，如<div media="(max-width:768px)">—— 浏览器忽略 - 错误：只靠
<link rel="stylesheet" href="a.css" media="screen">控制加载，却指望它做细粒度样式切换 —— 它只决定整张 CSS 是否引入 - 正确做法：所有响应式规则收口在主 CSS 文件中，用
@media嵌套，避免拆成多个link引入（HTTP 请求多、优先级难控）
最常被忽略的其实是 viewport 标签和断点来源——很多人调了一下午 @media 不生效，最后发现是 <meta> 被构建工具覆盖了，或者断点抄了 Bootstrap 却没适配自己卡片的实际换行宽度。
