必须加 <meta name="viewport" content="width=device-width, initial-scale=1">，否则浏览器以980px桌面宽度渲染，缩放导致文字模糊、点击错位，CSS无法修复；该标签须置于<head>内且不可JS动态插入。
viewport meta 标签没加，移动端永远不响应
不写 <meta name="viewport" content="width=device-width, initial-scale=1">，浏览器会以桌面宽度（通常 980px）渲染页面，缩放后文字模糊、按钮点不准——这不是 CSS 能救的。
这个标签必须放在 <head> 里，且不能被 JS 动态插入（部分安卓 WebView 不识别）。
- 别写
user-scalable=no，它会锁死缩放，违反 WCAG 可访问性要求 - 如果项目要兼容 IE10–11，
initial-scale=1不能省，否则缩放逻辑异常 - 不要用
maximum-scale或minimum-scale，它们在 iOS Safari 中已基本失效
CSS 媒体查询用 min-width 还是 max-width？
推荐优先用 @media (min-width: 768px)，而不是 @media (max-width: 767px)。前者是“移动优先”写法：基础样式写给小屏，再用 min-width 逐步增强；后者容易漏掉中间断点，维护成本高。
常见断点建议直接用标准值，别自定义一堆像素：480px（老手机）、768px（平板竖屏）、1024px（平板横屏）、1200px（桌面窄屏）。
立即学习“前端免费学习笔记（深入）”；
- 断点数值不是设备宽度，而是视口宽度（viewport width），受 zoom 和地址栏遮挡影响
- 避免嵌套媒体查询，CSS 顺序本身就能控制覆盖逻辑
- 用
em写断点（如(min-width: 48em)）更利于用户调整字体大小时保持比例，但开发中多数人仍用px
flexbox 布局中 flex-wrap 和 flex-basis 的坑
flex-wrap: wrap 是让子项换行的关键，但很多人忘了设 flex-basis 或 min-width，导致小屏下单个卡片撑满整行、文字溢出或高度塌陷。
例如三列网格，在 flex-direction: row 下，每个子项应设 flex: 0 0 calc(100% / 3 - 0.5rem) 或更稳妥的 flex-basis: 30% + min-width: 280px。
-
flex: 1在小屏下会强制拉伸，破坏布局节奏，慎用 -
flex-shrink: 0配合固定宽高时，可能引发横向滚动，需检查父容器overflow-x - IE10–11 对
flex-basis: auto解析异常，建议显式写flex-basis: 0或具体值
图片和 iframe 怎么做到等比缩放不溢出
<img> 加 max-width: 100% + height: auto 是基础，但 iframe（比如嵌入地图、视频）默认不响应。得用包裹容器 + padding-top 技巧：
.responsive-iframe {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%; /* 16:9 */
}
.responsive-iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}- padding-top 百分比基于父容器宽度计算，所以能实现等比缩放
- 视频类 iframe 推荐用
aspect-ratio: 16/9（Chrome 111+、Firefox 119+ 支持），但目前仍需 fallback 到 padding 方案 - srcset 和 sizes 属性别漏掉，否则高清屏下图片模糊：
<img src="a.jpg" srcset="a-2x.jpg 2x" sizes="(max-width: 768px) 100vw, 50vw">
实际做响应式时，最常被跳过的不是代码，而是真机测试——模拟器不触发地址栏收缩、不模拟 pinch-zoom 行为、不反映真实网络延迟下的资源加载顺序。断点调得再准，没在 iPhone SE、折叠屏、旧款 Android 上点过三遍“返回”，就不算完成。
