外贸站一半以上的流量来自手机。如果手机端只是”能看”，询盘转化至少打对折。响应式不是把桌面端缩小，而是一套独立的布局决策。
断点策略：只写最宽的那一档
桌面优先的站点，断点是叠加的 max-width 规则——写了 1024px 的规则，767px 和 478px 自动继承。所以不要每个断点都写一遍，只写”布局开始不舒服”的那个宽度。
- 1024px（平板竖屏）：多列网格塌成一列，横排开始换行
- 767px（手机横屏）：导航变汉堡菜单，间距降档
- 478px（手机竖屏）：字号、按钮保持可点区域 ≥ 44px
手机端的四个硬要求
可点区域
按钮、菜单项、表单输入框的最小可点区域 44×44px。电话号码做成 tel: 链接，WhatsApp 做成 wa.me 链接，让转化动作一步直达。
间距降档
桌面端 80px 的区块间距，手机端要降到 32~48px。用语义化的间距变量统一管理，改一处全站生效，而不是每页手调。
图片与表格
两列参数表在手机上必然溢出，要么塌成单列，要么横向滚动。测试时用浏览器 F12 的设备模拟，1024 / 767 / 478 三档各过一遍。
记住判断标准： thumb test——单手拇指能不能完成”看到产品、发起询盘”的完整路径。
快速自查清单
拿起手机完成这条路径：打开首页 → 滑到产品区 → 点进一个产品页 → 点询盘 → 填完提交。全程超过 90 秒、出现横向滚动、文字小于 14px、按钮点不中——每一条都是转化路上的坑。修完再用 1024px 平板宽度过一遍，两列布局该塌的塌。
响应式做没做好，买家不说，但会用退出投票。
