解释响应式设计精粹的 9 个 GIF (译)

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

响应式 VS 适应式

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

 

响应式 vs 适应

 

相对单位

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

相对单位

 

流动布局

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

流动布局

 

断点

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

断点

 

嵌套元素

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

嵌套元素

 

最大宽度

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

最大宽度

 

移动优先 VS 桌面优先

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

移动优先 VS 桌面优先

 

位图 VS 矢量图

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

 

系统字体 VS Web 字体

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

 

原文可以阅读 Froont 的 全文 。

添加评论

邮箱不会被公开, 标有 *的是必填项

*
*