css 布局写死宽度不适配怎么办_改用 css 自适应布局方案

应使用 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 宽度——比如内容开始换行时的宽度，才是真正的断点。