必须添加viewport meta标签，否则媒体查询失效；断点应基于布局坍塌点而非设备型号；中后台需重构dom结构适配移动端，禁用负定位与css-in-js响应式写法。
后台管理页面在手机上直接缩放显示，不是“适配”，而是“勉强可见”——按钮点不准、文字挤成一团、菜单遮挡内容，本质是布局没做响应式重构，只靠 viewport 缩放硬撑。
必须加 viewport meta 标签，否则媒体查询失效
很多后台项目漏掉这行，导致 @media 规则压根不触发：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
关键点：
-
width=device-width是前提，没了它，手机浏览器会按 980px 虚拟宽度渲染，@media (max-width: 768px)永远不会匹配 -
user-scalable=no在管理后台里建议保留——防止用户双指放大后界面错位，且业务场景不需要缩放操作 - 不要写
minimum-scale或maximum-scale为 1.0 以外的值，iOS Safari 10+ 对非 1.0 值有兼容问题
断点别套“iPhone SE / iPhone 12”数值，盯住你自己的布局坍塌点
设计师给的侧边栏宽度是 250px？那当视口宽度 ≤ 250px 时，它必然撑满甚至溢出——这就是你的第一断点位置。
实操建议：
- 打开 Chrome DevTools → 切换设备模拟 → 拖动宽度滑块，眼睛盯着导航栏、表格列宽、操作按钮组：哪一刻开始重叠/换行/裁切？记下那个像素值
- 用
min-width写，比如@media (min-width: 251px)开始隐藏菜单、切换为顶部 Tab 导航 - 避免混用
max-width和min-width断点，尤其别写@media (max-width: 768px)和@media (min-width: 768px)并存——768px 这一像素边界可能两个都不生效或都生效 - iPad Pro 横屏宽度常超 1024px，若只设
@media (max-width: 1024px)，它就掉进无样式真空区
菜单栏、操作区、表格这些高频区域要单独处理
中后台的 DOM 结构往往固定为「左侧菜单 + 右侧主内容」，手机上必须打破这个结构：
- 菜单栏：默认
display: none，用 JS 控制显隐（如点击汉堡图标），不要靠position: absolute; left: -250px硬推——Safari iOS 15.4 以下对负定位 + transform 的渲染有偏移 bug - 操作按钮组（如搜索、导出、新增）：PC 是横向 inline-block，手机应改为垂直堆叠，加
flex-direction: column或display: block，并统一margin-bottom: 8px - 表格：别试图让
<table> 自适应小屏。真要展示，用 <code>overflow-x: auto包一层<div>，内部加 <code>white-space: nowrap防文字折行；更优解是手机端改用卡片列表（<ul class="list-card"></ul>）替代表格第三方组件样式要全局接管，不能靠局部覆盖
Ant Design、Element Plus 这类组件库的默认样式在手机上大概率崩坏，但逐个组件加
@media维护成本爆炸：- 把所有需要响应式的组件类名（如
.ant-btn、.ant-table）统一收口到一个_responsive-overrides.css文件末尾，确保它在所有组件 CSS 之后加载 - 避免用 CSS-in-JS 方式写响应式（如 styled-components 的
css函数内嵌@media），编译后类名带哈希，无法被全局选择器命中 - 特别注意表单类组件：
.ant-input、.ant-select-selector在小屏下高度不够，需手动设min-height: 36px和padding: 6px 12px，否则手指点不中
最难的不是写多少
@media，而是判断你的布局在哪一个像素值真正“扛不住”——不是看设备参数，是看内容是否可读、可点、不重叠。拖动调试器宽度条时，别只盯着数字，盯着按钮有没有变小到拇指难触，盯着表格有没有横向滚动条突然出现，盯着弹窗有没有被截掉底部确认按钮。 - 把所有需要响应式的组件类名（如
