响应式设计

响应式设计是一种构建网页界面的方法，它利用流式布局、灵活的图像和 CSS 媒体查询，使同一套代码库能够根据显示设备的尺寸和功能自动调整。这种方法由 Ethan Marcotte 于 2010 年提出，取代了之前维护独立桌面网站和移动网站的做法，如今已成为几乎所有网页设计的默认标准。

它的主要优势在于只需维护一个实现方案，而非多个。独立的移动网站会随着时间的推移而出现差异，积累不一致之处，增加分析和搜索索引的复杂性，并使每次更改的成本翻倍。响应式实现方案能够保持内容、URL 和功能的统一，这也符合搜索引擎的页面索引和排名方式，因为移动优先索引会评估同一 URL 在移动设备上的呈现效果。

人们普遍误解响应式布局仅仅意味着布局不会错乱。在窄视口下将列重新排列成堆叠状只是最低要求，而非最终目标。真正的响应式布局要考虑到不同设备的上下文、功能和用户意图：触摸目标的大小要适合手指而非光标；导航模式要适合小屏幕而非压缩的桌面菜单；内容优先级要确保在垂直堆叠时最重要的内容优先显示；表单要使用合适的输入类型和键盘。

响应式设计在实践中最常见的失败点在于性能。如果页面布局在视觉上能够自适应，却仍然需要下载桌面尺寸的图片、完整的 JavaScript 包以及不必要的组件，那么在那些对性能要求极低的设备和网络连接上，页面虽然看起来没问题，但性能却会非常糟糕。只有使用合适的源文件、根据屏幕尺寸有条件地加载在小屏幕上不显示的组件，以及延迟加载非关键资源，才能使响应式设计在实际应用中真正发挥作用，而不仅仅是在桌面浏览器调整大小后才能勉强运行。

测试响应式设计需要使用真机，而不仅仅是浏览器窗口大小调整。模拟器无法重现触摸不精确、实际网络状况、中端硬件的内存限制，也无法模拟系统键盘和浏览器窗口占用垂直空间的情况。许多常见缺陷，例如键盘遮挡输入、占据小屏幕大部分空间的粘滞元素，以及单个宽元素导致的水平溢出，在桌面模拟器中不可见，但在手机上却显而易见。

响应式设计还必须考虑文本缩放和缩放，而这些往往被忽视，却是导致无障碍访问失败的常见原因。使用固定像素尺寸构建的布局可能在设备宽度范围内正确重排，但当用户增大浏览器默认文本大小或将缩放比例提高到 200% 时，布局就会完全错乱——而相当一部分用户会一直使用 200% 的缩放比例。在这些情况下，内容溢出容器、被裁剪或需要水平滚动才能显示，这既不符合可用性标准，也不符合无障碍访问标准。在增大文本大小和高缩放级别下进行测试只需几分钟，就能发现设备宽度测试无法发现的一类缺陷，因为这两种限制条件对布局的影响方式不同。

由于响应式设计涵盖布局、内容策略和交付方式，因此仅靠调整断点很少能改善其效果。 产品设计 采用持久化的方法是在设计系统中定义跨视口的布局、间距和组件行为，以便新页面默认继承正确的行为。性能方面则属于…… 网络性能 工作效率很高，因为响应式网站在移动设备上转化率高与转化率低之间的区别通常在于网站大小和加载策略，而不是布局。