过去一年我们承接的福州网站开发项目中，超过七成客户在验收时用手机打开页面。这个比例在两年前还不到四成。移动端流量早已不是"额外适配"，而是默认主战场。

移动端适配为何频频翻车

很多团队的做法是先做PC版，再"压缩"成移动版。问题在于，PC端依赖的固定栅格、绝对定位和较大的交互热区，在375px宽的屏幕上会直接崩掉。常见表现：横向滚动条溢出、字体小于12px、按钮点不中。

根源在于视口（viewport）配置缺失或错误。没有设置 meta viewport 的页面，移动浏览器会默认按980px渲染再缩放，导致所有rem和百分比计算全部失真。

响应式布局的三个技术锚点

• 断点选择：不要照搬Bootstrap的768/992/1200。应根据内容断裂点来定，常见移动优先断点为480px、768px、1024px。
• 弹性单位：用rem配合根字号动态计算，或直接用vw+clamp()实现流体排版，减少媒体查询数量。
• 图片适配：使用 srcset + sizes 按DPR加载，避免在Retina屏上糊成一片。

移动优先与渐进增强的取舍

移动优先（Mobile First）意味着基础样式面向小屏，再用 min-width 媒体查询向上增强。这种方式CSS体积更小、加载更快。但如果是网站搭建中后台管理系统这类以桌面操作为主的场景，PC优先反而更务实。

另一个容易被忽略的点：触控目标最小尺寸应不低于44×44px（Apple HIG标准），间距不小于8px。这在app开发的WebView嵌入场景中同样适用。

建议在项目初期就确定适配策略，用Chrome DevTools的设备模拟配合真机测试，重点关注iPhone SE（375px）和主流安卓（360px）两个下限。响应式不是写完CSS就结束的事，它需要贯穿福州网站开发的整个流程。