18年沉淀高端建站经验
为企业持续赋能品牌新价值
同一套代码要在手机和电脑上都好看，靠的是三处可变的设定。响应式设计把这件事拆成断点、网格和资源三步，任何一步没设好，页面在某个尺寸就会散架。
先分清一个差别。响应式是内容全给，只换排法。自适应按设备裁掉一部分内容。两者做法不同，选错方向后期很难改。
常见做法是 3 个断点，分别对应手机、平板和桌面。断点位置看内容在哪个宽度开始挤，不要照抄别人的数值。
移动优先的意思是先写窄屏样式，再用媒体查询往上加。这样基础样式最精简，窄屏用户拿到的文件最小。
流体网格靠百分比和弹性单位排布，容器宽度跟着视口走。固定像素宽度的容器在 320 像素的小屏上必然横向溢出。
图片同样处理，给一个最大宽度 ****。矢量图优先用 SVG，放大不糊，文件也比位图小。
窄屏放不下的东西，先想清楚哪些可以后置。次要信息挪到折叠区或者二级页，主路径保持完整。
表单在手机上按钮要够大。触控目标小于 44 像素，误点率会明显上升。
| 检查项 | 常见问题 | 验收方式 |
|---|---|---|
| 横向滚动 | 表格撑破容器 | 320 像素宽下无横向条 |
| 字号 | 正文小于 16 像素 | 手机上不缩放可读 |
| 图片 | 按原图加载 | 按屏宽给多套尺寸 |
| 导航 | 展开后盖住内容 | 点空白处能收回 |
无障碍也要一起过。对比度不足 4.5 比 1 的文字，读屏和弱视用户都吃力。
极简不等于空。删掉的是干扰项，留下的每个元素仍要承担说明任务。
五步流程怎么落地，另一篇查看详情排得更细。
