viewport标签必须置于head最前面，仅含width=device-width和initial-scale=1.0；table应配overflow-x:auto与min-width；flex推荐flex:1 1 280px；多屏DPI需系统级统一设置。
viewport 标签没放对位置，响应式直接失效
不加 <meta name="viewport" content="width=device-width, initial-scale=1.0">，或者它没放在 <head> 最前面，页面在手机和平板上就永远按 980px 渲染——你写的 @media 规则根本不会触发。
常见错误包括：
• 把它塞在 <link rel="stylesheet"> 后面
• 混用 maximum-scale=1.0 或 user-scalable=no，导致 iOS 双击缩放失灵、可访问性被破坏
• 写成 content="width=768" 这类固定值，失去设备适配能力
正确做法：
• 必须是 <head> 中第一个标签
• 仅保留 width=device-width 和 initial-scale=1.0 两项
• 用 Chrome DevTools 切换 iPad 模拟器，检查 Elements 面板里 <html> 的 clientWidth 是否接近 768 或 1024（不是 980）
表格在移动端错位，别硬撑 fixed 布局
table-layout: fixed 看似能控列宽，但若没配套处理，反而让小屏更糊：列内容被截断、文字挤成一团、横向滚动条藏得深，用户根本找不到。
立即学习“前端免费学习笔记（深入）”；
真正有效的组合是：
• table { width: 100%; table-layout: auto; }（去掉 fixed，让浏览器按内容弹性计算）
• 给每列 <th> 或 <td> 加 min-width，比如 min-width: 120px
• 外层套 <div style="overflow-x: auto">，保证横向可滑动
• 避免在 <table> 上设 height 或 max-height，会强制截断行高
如果必须用 fixed，那就得给每一列都写明 width 百分比，且总和 ≤ 100%，否则剩余空间分配不可控。
Flex 布局中 flex-basis 比 width 更稳
用 width: 33.33% 做三栏，在平板横屏下常因 padding/border 导致第四栏掉下来；而 flex: 0 0 33.33% 又太死板，无法拉伸填满空隙。
推荐写法：
• .item { flex: 1 1 280px; min-width: 280px; } —— 允许等比拉伸，基础宽度 280px，最小不跌破这个值
• 父容器统一设 display: flex; flex-wrap: wrap;，避免子项强行单行溢出
• 不要依赖 justify-content: space-between 在小屏上撑开间距，它会让最后一行只剩一个 item 时留大片空白
特别注意：Chrome 120+ 对 flex: none 解析更严格，如果某子项需固定尺寸，显式写 flex: 0 0 auto，别省略。
多屏 DPI 不一致，开发工具界面错位不是代码问题
VS Code、Chrome DevTools 或 Sublime Text 在外接显示器后按钮错位、字体模糊，大概率不是 HTML/CSS 写错了，而是系统 DPI 缩放没对齐。
优先试这三步：
• 右键快捷方式 → 属性 → 兼容性 → “更改高 DPI 设置” → 勾选“替代高 DPI 缩放行为”，选“应用程序”
• Windows 显示设置里，把主屏和副屏的“缩放与布局”百分比设成一样（比如都 125%，别一个 100% 一个 150%）
• VS Code 启动时加参数：--force-device-scale-factor=1，绕过系统插值渲染
别急着改 CSS 的 transform: scale() 或 zoom，那只是视觉欺骗，点击区域和实际坐标仍错位。
