响应式设计不是简单地写几个媒体查询，而是从内容结构出发，让同一套页面在不同尺寸的设备上都能提供舒适的阅读与操作体验。

一、先规划断点，再写样式

常见的断点思路是按设备类型的真实使用场景划分，例如 640px（手机）、992px（平板）、1200px 以上（桌面）。断点不宜过多，3 到 4 个足够覆盖绝大多数设备，过多的断点会让维护成本迅速上升。

二、字体与点击区域要一起考虑

移动端的正文建议不小于 16px，交互元素的点击区域不小于 44×44px。很多时候页面在电脑上「看着没问题」，到手机上就变得难以点击，根源都在这两个数值上。

三、图片与媒体资源要自适应

图片统一使用 max-width:100% 而不是固定宽度；首屏大图按端准备不同尺寸，避免手机加载桌面尺寸的大图造成的流量浪费与等待。

做好这三点，官网在多端上的体验基本就能达到可交付的水准。