超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

想學響應式設(shè)計?來看史上最全的響應式設(shè)計資源庫

2013-11-28    藍藍設(shè)計的小編

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

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

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

想學響應式設(shè)計?來看史上最全的響應式設(shè)計資源庫

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

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

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

CSS 響應式框架

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

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

responsive-design-1

Cardinal

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


responsive-design-2

Typeplate

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


responsive-design-3

Furatto

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


http://icalialabs.github.io/furatto

Kraken

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


responsive-design-5

Gridism

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


responsive-design-6

Sassaparilla

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


responsive-design-7

Cool Kitten

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


responsive-design-8

Responsive Boilerplate

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


responsive-design-9

Javascript 響應式插件

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

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

responsive-design-10

jPanelMenu

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


responsive-design-11

SelectNav.js

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


responsive-design-12

Adapt.js

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


responsive-design-13

Masonry

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


responsive-design-14

RoyalSlider ($12)

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


responsive-design-15

UberMenu – WordPress ($16)

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


responsive-design-16

Responsive Pricing Tables – WordPress ($15)

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


responsive-design-17

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

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

Responsive menu patterns

responsive-design-18

A Responsive Design Approach for Navigation (文章)


responsive-design-19

Flexnav

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


responsive-design-20

Naver

Naver一款面向響應式導航的jQuery插件


responsive-design-21

Navigataur

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


responsive-design-22

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

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

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

responsive-design-23

Clown Car Technique for Responsive Images

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


responsive-design-24

Responsive Img

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


responsive-design-25

響應式設(shè)計工具

See your site responsive

responsive-design-26

Viewport Resizer

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


responsive-design-27

Screenqueri.es

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


responsive-design-28

Responsive Web CSS

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


responsive-design-29 

 

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.miumiuwan.com

存檔