沒有任何頭緒如何把網站從傳統變為響應式網站？來自 FROONT 的這些 GIF 可以讓你一秒變專家。
響應式 VS 適應式
響應設計是可以流動擴展的，而適應性設計取決于你擴大瀏覽器或者視圖。
響應式 vs 適應
相對單位
使用 XY 坐標定位你的設計， 會導致你的設計是為一個尺寸設計的，在另一尺寸的屏幕上，會顯得十分怪異。建議使用相對單位，比如百分比，而不是絕對單位，比如像素。
相對單位
流動布局
隨著屏幕尺寸變小，內容開始占據更多的垂直空間，下方的任何內容都會被下推。這就是所謂的“流動布局”。
流動布局
斷點
為你的設計稿設置“斷點”。“斷點”（Breakpoint）允許布局在預定的點改變。比如，在桌面上有三列，在移動設備上只有一列 。
斷點
嵌套元素
通過使用嵌套元素（Nested Object），可以使屏幕上的元素隨著屏幕同時縮放，而不是每個單獨縮放。
嵌套元素
最大寬度
注意控制“最大寬度”（Max width）。有時候，始終充滿屏幕的布局是很好的，但相同的內容拉伸顯示在尺寸較大的屏幕上（比如電視）通常意義不大。
最大寬度
移動優先 VS 桌面優先
實際上，一個項目無論是從小屏幕到大屏幕（移動優先），還是從大屏幕到小屏幕（桌面優先），在技術上都沒有太大的差別。考慮移動設備時，注意它有額外的限制。
移動優先 VS 桌面優先
位圖 VS 矢量圖
你的圖標有很多細節和一些花哨的特效？如果是的話，可以使用位圖。如果沒有，請考慮使用矢量圖像。矢量圖像能更更好地適應不同的分辨率。
位圖 VS 矢量圖
系統字體 VS Web 字體
想要你的網站看起來更酷？可以使用 web font，需要注意的是，每個字體在展示給用戶時，都需要從你的服務器下載。所以使用 web font 的種類越多，加載速度就越慢。
系統字體 VS Web 字體
原文可以閱讀 Froont 的 全文 。
