不用框架也能做响应式，但必须守住三个硬性前提：必加viewport标签、容器宽度用%或max-width而非固定px、关键断点用@media而非js适配。
直接说结论：不用框架也能做，但必须守住三个硬性前提——<meta name="viewport"> 必加、容器宽度用 % 或 max-width 而非固定 px、关键断点用 @media 控制而非 JS 适配。
viewport 标签漏写，所有响应式都是白忙
手机浏览器默认以 980px 宽度渲染页面，不加 <meta name="viewport" content="width=device-width, initial-scale=1">，你写的 @media 再精准也无效。它不是“锦上添花”，是响应式的第一道门禁。
- 必须放在
里，且在所有 CSS 引入之前 -
initial-scale=1不能省，否则 iOS Safari 可能触发双击缩放逻辑 - 别加
user-scalable=no——无障碍和部分安卓浏览器会拒斥这个设置
Grid 布局比 float + media 查询更省事
管理系统通常有侧边栏 + 主内容区结构，用 display: grid 配合 minmax() 和 auto-fit，能自动适应屏幕宽度变化，减少重复写 @media 的次数。
- 示例：
grid-template-columns: minmax(240px, 20%) 1fr;表示侧边栏最小 240px、最大占 20%，主区域填满剩余空间 - 小屏下改用
grid-template-rows: auto 1fr;+grid-template-areas重排区块顺序，比用float清除塌陷更可控 - 注意：IE11 支持 Grid 但不支持
subgrid和部分函数，若需兼容，降级用flex或加@supports判断
表格类内容在小屏上最易崩，得单独处理
管理系统的数据表格（<table>）在手机上横向溢出是高频问题，单纯设 <code>overflow-x: auto 不够——滚动条遮挡内容、点击错位、iOS 滚动卡顿都可能出现。
- 优先用语义化
<div> + <code>display: table模拟表格结构，再配合flex-direction: column实现小屏垂直堆叠 - 真要用原生
<table>，外层必须包 <code><div style="overflow-x: auto; -webkit-overflow-scrolling: touch;"> <li>列宽别设固定 <code>px，改用min-width+max-width组合，例如min-width: 120px; width: 15%; - 推荐组合：
font-size: clamp(14px, 4vw, 18px);—— 最小 14px、随视口线性增长、上限 18px - 按钮高度同理：
height: clamp(32px, 6vh, 44px);，避免小屏点不准、大屏按不下去 - 别忘了
input、select这些表单控件的padding和line-height也要同步 clamp，否则视觉割裂
字体和按钮尺寸不能只靠 rem/vw，得设上下限
管理系统对可读性和点击精度要求高，vw 单位在超大屏（如 4K 显示器）下会让文字巨无霸，rem 在根字号没控制好时也会失衡。
真正难的不是写出能变的布局，而是判断哪些地方「不该变」——比如操作按钮的最小可触区域必须 ≥ 44×44px，比如表格行高低于 36px 就会影响阅读节奏。这些约束条件，比媒体查询本身更决定一个管理系统的可用性。
