必须在<head>中添加viewport元标签，否则响应式CSS失效；推荐使用rem或vw替代px；按设备断点用媒体查询切换布局；小屏表格需用overflow-x: auto包裹并设display: block。
用 viewport 元标签开启响应式基础
没加这行，其他所有 CSS 都白调——这是移动端布局最常被跳过的起点。
必须在 <head> 里写死：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
漏掉它，浏览器会按桌面默认宽度（通常是 980px）渲染页面，再缩放显示，导致文字小、点击难、布局错位。iOS Safari 和 Android Chrome 都依赖这个声明来启用响应式行为。
常见错误包括：
立即学习“前端免费学习笔记（深入）”；
- 完全没写
viewport - 写了但
content值里混入了user-scalable=no（禁用缩放，违反无障碍要求） - 误用
maximum-scale=1.0导致横屏时内容被裁切
用 rem 或 vw 替代 px 控制尺寸弹性
固定像素单位（px）在不同设备上物理尺寸差异大，直接导致按钮太小、文字看不清。
推荐两种轻量方案：
-
rem：基于根元素font-size计算，适合需要统一缩放节奏的项目。常用做法是用 JS 或媒体查询动态设置html的字体大小，例如在 375px 宽屏下设为16px，768px 下设为20px -
vw：视口宽度百分比单位，适合全宽组件（如 banner 图、标题栏）。font-size: 4.5vw能让标题随屏幕线性放大，但要注意最小字号限制（可用clamp()补救）
别用 % 直接套在非容器子元素上——它依赖父容器宽度，嵌套深了容易失控；也慎用 em，它会继承层级缩放，调试困难。
用媒体查询按断点切换布局结构
断点不是猜的，得按真实设备分布设。主流断点仍沿用 Bootstrap3 的三档划分，但需根据实际用户数据微调：
- 手机：
@media (max-width: 767px)（覆盖绝大多数 iPhone 和安卓小屏） - 平板：
@media (min-width: 768px) and (max-width: 1023px)（iPad 及中等安卓平板） - 桌面：
@media (min-width: 1024px)（含折叠屏展开态）
关键不是“适配所有尺寸”，而是聚焦你用户真正在用的设备。比如微信内置浏览器在 iOS 上常报告错误的 device-width，建议用 max-device-width 辅助判断；Android Chrome 则更认 width。
结构切换优先级：隐藏次要内容 > 改变排列方向（flex-direction: column） > 替换网格列数（grid-template-columns: repeat(2, 1fr)）> 调整字体和间距。
表格在小屏上别硬撑，优先用 display: block + overflow-x: auto
原生 <table> 在 320px 屏上强行压缩列宽，结果是文字挤成一团、无法点击、失去可读性。
最稳妥的 fallback 方案是：
- 给表格外层套一层
<div class="table-wrapper"> - CSS 中设
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } - 表格本身加
display: block，并移除border-collapse等破坏块级行为的属性
不要依赖 table-responsive 类（尤其老版本 Bootstrap），它只是加了个 div 包裹，没解决表头与数据错位问题。真要语义化展示，得用 <dl> 或 JSON 渲染成卡片流——但那是业务逻辑层该决定的事，CSS 层只管让它能滑、能读、不炸。
复杂点在于：横向滚动区域的触摸惯性、iOS Safari 滚动条默认隐藏、以及屏幕阅读器对 overflow 内容的支持度参差不齐——这些没法靠一行 CSS 解决，得结合 ARIA 标签和 JS 检测补足。
