轉(zhuǎn)載藍藍設(shè)計(   www.bouu.cn  )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、 cs界面設(shè)計 、  ipad界面設(shè)計   、  包裝設(shè)計 、  圖標定制 、  用戶體驗 、交互設(shè)計、   網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

來源：http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，   請點這里

響應(yīng)式設(shè)計起源：Ethan Marcotte在2010年寫了一篇響應(yīng)式的文章，宣揚這種新式的網(wǎng)頁設(shè)計思想，經(jīng)過3年的發(fā)展，響應(yīng)式設(shè)計得到了眾多設(shè)計師的認可。

本文的目的在于為大家集中推薦一些最有價值的響應(yīng)式設(shè)計資源。包含了CSS框架、在線工具、準備階段的工具等等。

推薦閱讀：
《不要落伍！來和小伙伴一起學習響應(yīng)式網(wǎng)頁設(shè)計》
《來試試響應(yīng)式設(shè)計！25例優(yōu)秀的響應(yīng)式網(wǎng)頁設(shè)計賞析》
《年終特典！當下最熱門的網(wǎng)頁設(shè)計趨勢總結(jié)》

CSS 響應(yīng)式框架

這一部分主要介紹了一些的CSS響應(yīng)式框架，更輕量，而且兼容性也不差。（Foundation，Skeleton是較為老式的CSS響應(yīng)式框架）

Girder
Girder 使用了Sass silent classes (占位符，輸出時不會體現(xiàn))在HTML中組織內(nèi)容，標記能夠額外處理一些表象類（presentational classes ），比如 “unit_1of4″, “small-2″, “grid4″.

Cardinal

Cardinal 是一個小型的、以”移動優(yōu)先”為理念的CSS框架，默認樣式很實用。靈活的字體和響應(yīng)式的柵格線系統(tǒng)。

Typeplate

Typeplate是一款”排版初學者工具”. 一款簡約的Sass/CSS庫，能夠采用合適的手段處理作品。

Furatto

Furatto 基于Sass，包含了JS插件，在Coffeescript中開發(fā)的，因此很容易閱讀。交互性很強，支持多種設(shè)備。

Kraken

輕量、移動優(yōu)先為理念的模板，適合前端開發(fā)者。

Gridism

Gridism 是一款簡約的響應(yīng)式柵格線系統(tǒng)，非常好用。

Sassaparilla

Sassaparilla 使用了Sass以及Compass技術(shù)，讓響應(yīng)式網(wǎng)頁設(shè)計變得簡單。注重于更好的版式布局，打造良好的閱讀節(jié)奏。讓編譯更加輕松。

Cool Kitten

Cool Kitten是一款滾動視差響應(yīng)式框架（個人最愛）

Responsive Boilerplate

Responsive Boilerplate 極度簡約、非常輕量(2kb)的CSS柵格框架。易懂易用。

Javascript 響應(yīng)式插件

這些腳本要么是一小段代碼，要么是幾個文件，能夠?qū)崿F(xiàn)網(wǎng)頁設(shè)計作品的響應(yīng)式。大部分自動注釋，因此很方便使用。

Responsive elements
Responsive Elements 小型JS庫，能夠輕松實現(xiàn)元素的響應(yīng)式。

jPanelMenu

jPanelMenu 是一款jQuery插件，由一款面板式的菜單創(chuàng)建。保證CSS動畫更好的實現(xiàn)。

SelectNav.js

SelectNav 是一款JS插件，能夠?qū)⒕W(wǎng)站的導航欄轉(zhuǎn)換為可選擇的下拉菜單。結(jié)合了Media Queries，能為移動設(shè)備節(jié)約空間。

Adapt.js

Adapt.js 輕量級JS文件，在瀏覽器載入頁面前，能夠根據(jù)寬度，智能判定并載入CSS文件。

Masonry

Masonry 是一款優(yōu)秀的jQuery插件，能夠打造動態(tài)、適應(yīng)性的布局。能夠幫助重新排列元素。

RoyalSlider ($12)

RoyalSlider 是一款很好用的jQuery圖庫或內(nèi)容滾動插件，動效、響應(yīng)式布局、支持觸控，很適合移動端。無論是滾動欄、幻燈片窗還是內(nèi)容滾動欄、圖庫、視頻庫都能用其實現(xiàn)。

UberMenu – WordPress ($16)

UberMenu 是一款非常友好的、高度定制化的、響應(yīng)式的 Mega Menu WordPress插件。

Responsive Pricing Tables – WordPress ($15)

CSS3 Responsive Web Pricing Tables Grids For WordPress CSS3 價格表，兩種價格表樣式，20種可選顏色，可選項豐富。

響應(yīng)式設(shè)計——導航篇

響應(yīng)式設(shè)計中最難的部分大概就是導航了。即便你的導航菜單占地很小，但是移動端的設(shè)計依然很困難。傳統(tǒng)的網(wǎng)頁設(shè)計總是把導航菜單放在頁頂，以便用戶瀏覽。而響應(yīng)式設(shè)計中，情況很復雜。這一環(huán)節(jié)，將推薦幾種不錯的解決方案。

Responsive menu patterns

A Responsive Design Approach for Navigation (文章)

Flexnav

FlexNav 是一款使用Media Queries和JS實現(xiàn)的多級菜單，支持觸控、懸停。符合”移動優(yōu)先”理念。

Naver

Naver一款面向響應(yīng)式導航的jQuery插件

Navigataur

Navigataur 是一款簡約的工具，幫助實現(xiàn)響應(yīng)式導航菜單。

響應(yīng)式設(shè)計——圖像

如何根據(jù)瀏覽器尺寸、加載速度選擇圖片尺寸？

CSS Fluid Image Techniques for Responsive Site Design (Article)
Dudley Storey 創(chuàng)作的一篇優(yōu)秀文章，闡述了該要如何打造”伸縮自如”的圖像

Clown Car Technique for Responsive Images

Estelle Weyl, 寫了一篇關(guān)于可縮放矢量圖形(SVG)的文章，生動有趣。

Responsive Img

Responsive Img 是一款jQuery插件，能夠變換圖像的src屬性，主要根據(jù)的是容器的寬度。

響應(yīng)式設(shè)計工具

See your site responsive

Viewport Resizer

Viewport Resizer 是一款在線工具能夠測試網(wǎng)頁設(shè)計是否符合響應(yīng)式設(shè)計的標準。

Screenqueri.es

Screenqueri.es 是一款細膩的響應(yīng)式測試工具。能夠在30多種不同的設(shè)備上展示你的網(wǎng)頁設(shè)計。

Responsive Web CSS

Responsive Web CSS 讓響應(yīng)式網(wǎng)頁布局變得輕松。只需要添加div，設(shè)置一下不同設(shè)備上的大小即可。