萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 最全的響應式設計資源庫

最全的響應式設計資源庫

   CSS 響應式框架

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

  Girder

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

最全的響應式設計資源庫 三聯

  Cardinal

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

responsive-design-2

  Typeplate

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

responsive-design-3

  Furatto

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

http://icalialabs.github.io/furatto

  Kraken

  輕量、移動優先為理念的模板,適合前端開發者。

responsive-design-5

  Gridism

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

responsive-design-6

  Sassaparilla

  Sassaparilla 使用了Sass以及Compass技術,讓響應式網頁設計變得簡單。注重於更好的版式布局,打造良好的閱讀節奏。讓編譯更加輕松。

responsive-design-7

  Cool Kitten

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

responsive-design-8

  Responsive Boilerplate

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

responsive-design-9

  Javascript 響應式插件

  這些腳本要麼是一小段代碼,要麼是幾個文件,能夠實現網頁設計作品的響應式。大部分自動注釋,因此很方便使用。

  Responsive elements

  Responsive Elements 小型JS庫,能夠輕松實現元素的響應式。

responsive-design-10

  jPanelMenu

  jPanelMenu 是一款jQuery插件,由一款面板式的菜單創建。保證CSS動畫更好的實現。

responsive-design-11

  SelectNav.js

  SelectNav 是一款JS插件,能夠將網站的導航欄轉換為可選擇的下拉菜單。結合了Media Queries,能為移動設備節約空間。

responsive-design-12

  Adapt.js

  Adapt.js 輕量級JS文件,在浏覽器載入頁面前,能夠根據寬度,智能判定並載入CSS文件。

responsive-design-13

  Masonry

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

responsive-design-14

  RoyalSlider ($12)

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

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

  響應式設計——導航篇

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

  Responsive menu patterns

responsive-design-18

  A Responsive Design Approach for Navigation (文章)

responsive-design-19

  Flexnav

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

responsive-design-20

  Naver

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

responsive-design-21

  Navigataur

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

responsive-design-22

  響應式設計——圖像

  如何根據浏覽器尺寸、加載速度選擇圖片尺寸?

  CSS Fluid Image Techniques for Responsive Site Design (Article)

  Dudley Storey 創作的一篇優秀文章,闡述了該要如何打造”伸縮自如”的圖像

responsive-design-23

  Clown Car Technique for Responsive Images

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

responsive-design-24

  Responsive Img

  Responsive Img 是一款jQu

copyright © 萬盛學電腦網 all rights reserved