亚洲欧美香蕉在线日韩精选_www在线观看美女视频_娇妻的呻吟大团结内裤奇缘_免费a漫禁漫h漫在线

_{<noframes id="mlyk8"></noframes>}

想學(xué)響應(yīng)式設(shè)計(jì)？來看史上最全的響應(yīng)式設(shè)計(jì)資源庫

2013-11-28 藍(lán)藍(lán)設(shè)計(jì)的小編

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

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

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

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

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

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

CSS 響應(yīng)式框架

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

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

responsive-design-1

Cardinal

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

Typeplate

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

Furatto

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

Kraken

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

Gridism

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

Sassaparilla

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

Cool Kitten

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

Responsive Boilerplate

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

Javascript 響應(yīng)式插件

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

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

responsive-design-10

jPanelMenu

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

SelectNav.js

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

Adapt.js

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

Masonry

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

RoyalSlider ($12)

RoyalSlider 是一款很好用的jQuery圖庫或內(nèi)容滾動(dòng)插件，動(dòng)效、響應(yīng)式布局、支持觸控，很適合移動(dòng)端。無論是滾動(dòng)欄、幻燈片窗還是內(nèi)容滾動(dòng)欄、圖庫、視頻庫都能用其實(shí)現(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 價(jià)格表，兩種價(jià)格表樣式，20種可選顏色，可選項(xiàng)豐富。

響應(yīng)式設(shè)計(jì)——導(dǎo)航篇

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

Responsive menu patterns

responsive-design-18