没有任何头绪如何把网站从传统变为响应式网站？来自 FROONT 的这些 GIF 可以让你一秒变专家。
响应式 VS 适应式
响应设计是可以流动扩展的，而适应性设计取决于你扩大浏览器或者视图。
响应式 vs 适应
相对单位
使用 XY 坐标定位你的设计， 会导致你的设计是为一个尺寸设计的，在另一尺寸的屏幕上，会显得十分怪异。建议使用相对单位，比如百分比，而不是绝对单位，比如像素。
相对单位
流动布局
随着屏幕尺寸变小，内容开始占据更多的垂直空间，下方的任何内容都会被下推。这就是所谓的“流动布局”。
流动布局
断点
为你的设计稿设置“断点”。“断点”（Breakpoint）允许布局在预定的点改变。比如，在桌面上有三列，在移动设备上只有一列 。
断点
嵌套元素
通过使用嵌套元素（Nested Object），可以使屏幕上的元素随着屏幕同时缩放，而不是每个单独缩放。
嵌套元素
最大宽度
注意控制“最大宽度”（Max width）。有时候，始终充满屏幕的布局是很好的，但相同的内容拉伸显示在尺寸较大的屏幕上（比如电视）通常意义不大。
最大宽度
移动优先 VS 桌面优先
实际上，一个项目无论是从小屏幕到大屏幕（移动优先），还是从大屏幕到小屏幕（桌面优先），在技术上都没有太大的差别。考虑移动设备时，注意它有额外的限制。
移动优先 VS 桌面优先
位图 VS 矢量图
你的图标有很多细节和一些花哨的特效？如果是的话，可以使用位图。如果没有，请考虑使用矢量图像。矢量图像能更更好地适应不同的分辨率。
位图 VS 矢量图
系统字体 VS Web 字体
想要你的网站看起来更酷？可以使用 web font，需要注意的是，每个字体在展示给用户时，都需要从你的服务器下载。所以使用 web font 的种类越多，加载速度就越慢。
系统字体 VS Web 字体
原文可以阅读 Froont 的 全文 。
