实践干货！超实用的响应式设计技巧

响应式网站设计(Responsivewebdesign)但是已经被强调，不过由于中国研发习惯和APP设计优先，日常工作使用这些布局模式的机会不多。

美国网站使用这些布局模式较好，经过考察，结合尝试后，本文梳理了响应式设计的方式流程，记录问题与反思，帮助之后类似的项目启动更快。

什么是响应式布局

响应式加码常常和自适应深耕搞混。其实通过以下的动图我们很容易能理解它们的区分。

△响应式和自适应的差别，来源网上资料响应式布局优势

调研中我们看到，国外几个内容网站，YouTube、Spotify、Netflix和Behance，都使用了「内容墙」的设计方法，以突显内容的丰富度。

因为这些设计一般会维持容器之间的厚度不变，这就必须容器大小差异以适应窗口大小变化了。响应式的发力思路，很好地帮助完成内容墙的设计。

△满屏的内容突出了内容丰富度响应式加码的设计要点

在以前的研发合作中，设计提供切图和长度标注给开发就行了。

而响应式页面中的容器大小是动态的，我们可以提供一个表格，告诉开发在不同的页面宽度区间，对应的布局需要是如何样的。这些区间的临界点，就是「断点」。

我们以容器多，情况非常复杂的视频首页模拟一次确认断点的步骤。

△响应式布局的设计模式

首先，断点是体现页面出现突变的状况的，如边距开始出现差异、容器数量开始出现差异等。本例中，我们固定了侧边栏a、边距b、间距d。据下图公式，容易得知容器数量和容器宽度有着明确的次数关系。因此，寻找断点，需要我们先确认容器宽度(c)。

△容器数量和容器宽度有着明确的数量关系

容器宽度和容器内容相关。本例中，我们要求正常状况下容器尺寸最小300px，以保证封面图和标题文字能够被看懂。当容器尺寸被压到300px时，容器数量下降一个。

有了容器的最小厚度，那么我们可以输出给开发的「页面宽度-容器数量对应表」。从下表可以读出，浏览器长度在1284-1595px之间时，侧边栏展开为288px，放3个容器，浏览器会手动把容器尺寸算起来。

△页面宽度与容器数量关系表断点选择的方法

从后面的实例我们了解，确定断点和容器数量、容器大小有关。那么，断点的选择虽然是表现了，设计师对页面信息呈现形式的理解。

1.YouTube的小心机

调研的过程中，我们看到YouTube选择1143-1966px作为4个容器的前后断点。这个页面宽度区间很大，达到了824px（远超5个容器的跨度335px）。

△YouTube的网页断点情况

我们猜想：

2.关注高分屏的实际效果

需要非常注意的是，横向分辨率超过3840px的PC高分屏中，主流浏览器会根据2倍图展示内容。此外，Windows平台下有系统缩放，推荐的是1.25倍，导致3840px的屏幕尺寸，浏览器认为只有1536px(3840px÷2÷1.25)。所以有之后会发生在分辨率很高的屏幕下，响应式页面展示的内容甚至更少了的状况。

写在最后

响应式的布局方式能较好地支持愈发越流行的「内容墙」的设计。找好断点，设定好不同屏幕分辨率的加码策略，是响应式设计的关键。

原文：腾讯GLDesign