响应式改造核心是重构尺寸依赖逻辑而非仅加媒体查询：需将固定px值替换为流体单位，用max-width替代width，改用Flex/Grid布局，确保viewport标签正确设置，并适配图片字体及绝对定位细节。
固定布局转响应式，核心不是“加几个媒体查询”，而是推翻原有尺寸依赖逻辑——所有写死的 px 宽度、高度、margin、padding 都得重估用途，否则加了 @media 也只会让页面在小屏上错位或溢出。
把固定宽度容器换成流体单位
固定布局常见写法是 .container { width: 960px; margin: 0 auto; }。这种写法在手机上必然横向滚动。必须替换为相对单位，并保留最大宽度约束：
- 用
max-width替代width：比如.container { max-width: 1200px; width: 100%; margin: 0 auto; } - 避免对子元素设固定
width: 960px，改用flex-basis或grid-template-columns配合fr/minmax() - 慎用
min-width：它会阻止容器收缩，常导致移动端强制横向滚动
修复浮动与绝对定位导致的塌陷和错位
固定布局大量依赖 float 清除或 position: absolute 精确定位，这两者在响应式中极易失效：
-
float布局遇到窄屏时，浮动项会换行错乱，优先改用display: flex或display: grid - 绝对定位元素（如侧边栏、弹窗）若依赖父容器固定尺寸计算
top/right，需改为相对定位 +transform或用inset（CSS Logical Properties）适配方向 - 清除浮动的
clearfix类在 Flex/Grid 下已无意义，删掉
viewport 标签没生效，其他都白搭
很多开发者改完 CSS 发现手机上还是缩成一团，第一反应是查媒体查询，其实 90% 是 <meta name="viewport"> 没起作用：
立即学习“前端免费学习笔记（深入）”；
- 必须放在
最顶部，不能被 JS 动态插入，也不能被框架模板覆盖 - 禁止写
width=375或user-scalable=no——前者在折叠屏/横屏键盘场景下直接崩，后者违反可访问性 - 最简有效写法只有一行：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
图片和字体在小屏上糊、挤、断行，不是 CSS 问题
响应式不只是布局变，内容载体也要适配：
- 图片必须加
img { max-width: 100%; height: auto; }，否则固定width: 400px的图会在手机上溢出 - 用
srcset+sizes提供多分辨率图源，而不是只靠 CSS 缩放一张大图 - 字体大小别全用
px，正文建议用rem或em，标题可用clamp(1.5rem, 4vw, 2.5rem)实现平滑缩放
真正卡住人的地方，往往不是“怎么写媒体查询”，而是某个 position: absolute 的导航按钮在 iPad 分屏时脱离视口，或者某张背景图用了 background-size: cover 却没设 background-attachment: scroll，导致滚动时撕裂——这些细节不真机测三遍根本发现不了。
