前端开发踩坑小记｜记录一次简单的页面适配问题

前言

做开发久了发现，很多时候卡住我们的不是复杂的算法或者底层原理，反而是一些基础的样式、兼容、布局小细节。最近在写一个内部小页面的时候，就踩了一个移动端适配的坑，在这里简单记录一下过程和解决方案。

问题场景

需求很简单：做一个信息展示卡片，PC 端横向排列，手机端自动换行，卡片要均匀分布，保持间距，不能挤压变形。 一开始直接用了 float 布局，写完在电脑上看效果一切正常，结果打开手机预览就翻车了：

• 小屏幕下卡片挤在一起，文字溢出
• 两边出现横向滚动条，需要左右滑动
• 不同机型看，间距忽大忽小，很不统一

排查过程

1. 先检查 meta 标签，发现已经加了 viewport，排除没有设置视口的问题；
2. 查看盒子，卡片设置了固定宽度，没有用相对单位，屏幕变小之后宽度不会自适应；
3. float 本身不适合自动换行自适应布局，缺少弹性收缩的能力。

解决方案

换成 Flex 布局来实现，核心代码大概这样：

.wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 280px;
}

简单解释一下：

• flex-wrap: wrap：空间不够的时候自动换行；
• flex: 1 1 280px：可以放大、可以缩小，最小宽度 280px；
• gap 直接控制卡片之间的间距，不用再写 margin 去处理最后一个元素边距问题。

改完之后效果就稳定了：大屏并排，屏幕小于阈值自动换行，不会溢出，也没有横向滚动条。

一点感悟

很多新手（包括偶尔偷懒的我）写样式的时候，习惯先在电脑上调好就完事，忽略多端预览。 记住几个小习惯可以少踩坑：

1. 优先弹性布局 flex /grid，尽量少用 float 做自适应卡片；
2. 多使用相对单位，固定宽度谨慎使用；
3. 写完代码第一时间打开浏览器模拟器，切换不同尺寸验证；
4. 移动端优先的思路，先保证小屏幕正常，再去优化大屏。

结尾

这个问题本身不难，属于基础内容，但隔一段时间不写就容易遗忘。写博客的意义不一定是产出多么高深的技术文章，把遇到的坑简单记录下来，下次再碰到可以快速回忆，也算是一种沉淀。 后续继续记录开发中遇到的其他问题，持续更新。