腾讯出品！超实用的响应式设计技巧

响应式页设计 (Responsive web design) 虽然早已被，过因为国开发习惯和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的网页断点况

我们猜想：

• YouTube认1行4视频用户浏览的好数；
• 他们想把这种布覆盖流的(约66.25%)屏幕宽 1280-1920px。

2. 关注高分屏实效

需要特注意是，分辨率到3840px PC高分屏，主流浏览会按照2倍图展示内容。此，Windows系统下有系统缩放，荐是1.25倍，导致3840px屏幕宽度，浏览认为有1536px (3840px÷2÷1.25)。所以有时候会出现在分辨率很高屏幕下，响应页展示内容反而更少了情况。

写在最后

响应布局法能很好地支持越来越流「内容墙」设计。找好断，设定好不屏幕分辨率布局策略，是响应设计关键。

欢迎关注作者微信公众：「腾讯GLDesign」