沒有任何頭緒如何把網(wǎng)站從傳統(tǒng)變?yōu)轫憫?yīng)式網(wǎng)站？來自 FROONT 的這些 GIF 可以讓你一秒變專家。
響應(yīng)式 VS 適應(yīng)式
響應(yīng)設(shè)計(jì)是可以流動擴(kuò)展的，而適應(yīng)性設(shè)計(jì)取決于你擴(kuò)大瀏覽器或者視圖。
相對單位
使用 XY 坐標(biāo)定位你的設(shè)計(jì)蒲跨， 會導(dǎo)致你的設(shè)計(jì)是為一個(gè)尺寸設(shè)計(jì)的朱转，在另一尺寸的屏幕上蟹地，會顯得十分怪異。建議使用相對單位藤为，比如百分比锈津，而不是絕對單位，比如像素凉蜂。
流動布局
隨著屏幕尺寸變小琼梆，內(nèi)容開始占據(jù)更多的垂直空間，下方的任何內(nèi)容都會被下推窿吩。這就是所謂的“流動布局”茎杂。
斷點(diǎn)
為你的設(shè)計(jì)稿設(shè)置“斷點(diǎn)”∪已悖“斷點(diǎn)”（Breakpoint）允許布局在預(yù)定的點(diǎn)改變煌往。比如，在桌面上有三列轧邪，在移動設(shè)備上只有一列 刽脖。
嵌套元素
通過使用嵌套元素（Nested Object），可以使屏幕上的元素隨著屏幕同時(shí)縮放忌愚，而不是每個(gè)單獨(dú)縮放曲管。
最大寬度
注意控制“最大寬度”（Max width）。有時(shí)候硕糊，始終充滿屏幕的布局是很好的院水，但相同的內(nèi)容拉伸顯示在尺寸較大的屏幕上（比如電視）通常意義不大。
移動優(yōu)先 VS 桌面優(yōu)先
實(shí)際上简十，一個(gè)項(xiàng)目無論是從小屏幕到大屏幕（移動優(yōu)先）檬某，還是從大屏幕到小屏幕（桌面優(yōu)先），在技術(shù)上都沒有太大的差別螟蝙』帜眨考慮移動設(shè)備時(shí)，注意它有額外的限制胰默。
位圖 VS 矢量圖
你的圖標(biāo)有很多細(xì)節(jié)和一些花哨的特效场斑？如果是的話，可以使用位圖初坠。如果沒有和簸，請考慮使用矢量圖像彭雾。矢量圖像能更更好地適應(yīng)不同的分辨率碟刺。
系統(tǒng)字體 VS Web 字體
想要你的網(wǎng)站看起來更酷？可以使用 web font薯酝，需要注意的是半沽，每個(gè)字體在展示給用戶時(shí)爽柒，都需要從你的服務(wù)器下載。所以使用 web font 的種類越多者填，加載速度就越慢浩村。
原文可以閱讀 Froont 的 全文 。
