应使用 max-width + width: 100% + margin: 0 auto 实现弹性容器；用 flexbox 替代浮动/绝对定位，配合 flex-wrap 和 flex 属性实现自适应布局；优先采用 rem/em/vh 等相对单位；媒体查询应定义布局形态切换而非零散修 Bug。
用 max-width + width: 100% 替代固定 width
写死 width: 1200px 在小屏上必然溢出，但直接删掉又可能撑不满大屏。更稳妥的做法是让容器有上限、又能随屏幕收缩：
section {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}这样在屏幕 ≥1200px 时保持最大宽度，在手机上自动缩到 100% 宽度，且居中。注意别漏掉 margin: 0 auto，否则不居中。
用 flexbox 替代浮动或绝对定位做横向布局
浮动布局（float: left）和绝对定位（position: absolute）天生难适配。改用 display: flex 后，子元素能自动换行、等宽或按比例分配空间：
.container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.item {
flex: 1 1 300px; /* 最小宽度 300px，可伸缩 */
}关键点：flex-wrap: wrap 允许折行；flex: 1 1 300px 表示“基础宽度 300px，但可拉伸也可压缩”，比写死 width: 33.33% 更健壮。
慎用 px，优先用 rem、em 或视口单位
字体、内边距、外边距这些非结构性尺寸，写 px 就等于放弃缩放能力。换成相对单位后，用户缩放页面或切换系统字号时才不会崩：
-
font-size: 1rem（基于根字体大小，可统一调控） -
padding: 1.5em（相对于父元素字体大小） -
height: 80vh（视口高度的 80%，适合全屏区块）
rem 和 px 做同一组间距，比如 padding: 1rem 16px，这会让响应式断点逻辑变混乱。媒体查询不是补丁，而是布局分界线
很多人把 @media 当成“修 bug 的最后手段”，其实它该定义不同设备下的布局结构。比如：
@media (max-width: 768px) {
.header-nav {
flex-direction: column;
}
.card-grid {
grid-template-columns: 1fr;
}
}重点不是“让某个按钮变小”，而是“在小屏下把导航从横排切为竖排”“把卡片从三列变成单列”。每条媒体查询应对应一个明确的布局形态切换，而不是零散调样式。断点值建议用内容决定，而不是照搬 iPhone 宽度——比如内容开始换行时的宽度，才是真正的断点。 
