解释响应式设计精粹的 9 个 GIF （译）

没有任何头绪如何把网站从传统变为响应式网站？来自 FROONT 的这些 GIF 可以让你一秒变专家。

响应设计是可以流动扩展的，而适应性设计取决于你扩大浏览器或者视图。

响应式 vs 适应

使用 XY 坐标定位你的设计，会导致你的设计是为一个尺寸设计的，在另一尺寸的屏幕上，会显得十分怪异。建议使用相对单位，比如百分比，而不是绝对单位，比如像素。

相对单位

随着屏幕尺寸变小，内容开始占据更多的垂直空间，下方的任何内容都会被下推。这就是所谓的“流动布局”。

流动布局

为你的设计稿设置“断点”。“断点”（Breakpoint）允许布局在预定的点改变。比如，在桌面上有三列，在移动设备上只有一列。

断点

通过使用嵌套元素（Nested Object），可以使屏幕上的元素随着屏幕同时缩放，而不是每个单独缩放。

嵌套元素

注意控制“最大宽度”（Max width）。有时候，始终充满屏幕的布局是很好的，但相同的内容拉伸显示在尺寸较大的屏幕上（比如电视）通常意义不大。

最大宽度

实际上，一个项目无论是从小屏幕到大屏幕（移动优先），还是从大屏幕到小屏幕（桌面优先），在技术上都没有太大的差别。考虑移动设备时，注意它有额外的限制。

移动优先 VS 桌面优先

你的图标有很多细节和一些花哨的特效？如果是的话，可以使用位图。如果没有，请考虑使用矢量图像。矢量图像能更更好地适应不同的分辨率。

位图 VS 矢量图

想要你的网站看起来更酷？可以使用 web font，需要注意的是，每个字体在展示给用户时，都需要从你的服务器下载。所以使用 web font 的种类越多，加载速度就越慢。

系统字体 VS Web 字体

原文可以阅读 Froont 的全文。