响应式布局教程：从电脑到手机怎么排

尚品优品技术编辑 · 原创教程 · 更新于2026年10月23日 · 约7分钟阅读

把电脑页面缩小，并不等于完成手机适配。宽屏能并排放下的三列卡片，到了手机上可能连标题都挤不下；横向菜单也可能压住 Logo。这篇教程用一组产品卡片演示：如何先让内容自然流动，再在必要的位置改变布局。

一、从可伸缩的外层容器开始

先给页面内容设置最大宽度，同时保留两侧空间。不要把每个区块都写成固定的 1200px。容器可以随窗口缩小，达到阅读宽度后停止增长。正文与图片共用容器规则，多页面更容易保持一致。

.container {
  width: min(100% - 2rem, 75rem);
  margin-inline: auto;
}
img { max-width: 100%; height: auto; }
* { box-sizing: border-box; }

这里的两侧空间不是必须永远为 1rem；它是一个起点。检查实际内容后，可以在宽屏加大留白。先让默认布局可靠，再增加细节，排查问题时更容易知道是哪条规则产生了影响。

二、让卡片根据空间自动换列

产品、服务和文章列表通常适合使用网格。下面的写法允许浏览器根据可用空间决定列数，卡片有一个可读的最低宽度，同时能填满剩余空间。min(100%, 18rem) 用来照顾比最低卡片宽度更窄的容器。

.cards {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1.5rem;
}
.card { min-width: 0; }
.card h2 { overflow-wrap: anywhere; }

三、断点由内容决定

不要只因为某款手机宽 390px 就把全部断点写在 390px。慢慢缩小浏览器，观察菜单什么时候开始拥挤、两栏文字什么时候太窄。把这些真正影响阅读的位置作为断点，再测试断点前后几十像素。菜单、卡片、正文可以有不同的适配策略。

例如详情页在宽屏用左侧资料、右侧正文；当任一栏已经难以阅读，就切换为上下排列。手机上先显示项目名称和简介，再显示图片与详细内容。通过 CSS 改变排列时，也要留意 DOM 阅读顺序，避免键盘焦点与视觉顺序相互跳跃。

.detail { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
@media (max-width: 48rem) {
  .detail { grid-template-columns: 1fr; gap: 2rem; }
}

四、图片比例需要跟内容一起设计

产品和 Logo 需要完整展示时，优先保留整个主体；有明确背景的氛围照片则可以在安全范围内铺满。不要把两种用途统一成一条 cover 规则。横幅和手机卡片差别很大时，应准备不同构图，而不是指望自动裁切永远选对位置。

检查图片时，把页面文字、标签、圆角和悬浮按钮一起考虑。主角虽然在原图里完整，但可能被页面的文字层盖住。测试滚动动画的中间状态，确认电脑边缘、人物头部、产品底座没有在运动过程中离开画框。

五、按问题清单测试，而不只拍三张图

先检查 1440、834、390 三个宽度，再从宽到窄连续拖动窗口。重点观察长邮箱、带英文的标题、表格、代码和按钮。若页面产生横向滚动，先找超过视口的元素，不要直接给 body 加 overflow:hidden 把问题藏起来。

然后使用键盘打开菜单、进入链接并返回，检查焦点是否可见；用触控方式操作轮播和表单，检查点击区域是否方便。最后试一次减少动态效果设置，确认重要内容不会依赖某段动画才能出现。

练习任务：做一组包含长短标题的六张卡片，完成三列、两列和单列排列。再给其中一张放入一个长英文名称和一张竖向产品图，记录它们在每个宽度下的问题，逐个修复。用最难处理的内容测试，能更早发现布局规则的薄弱处。