Cherie缺小瑞的部落格

◎處理觸摸事件:

Hammer.JS

一個JavaScript庫來處理手勢事件。目前，它支持水龍頭，雙擊，按住，拖動和改造。這是一個獨立的庫，不需要其他任何東西，但可作為一個jQuery插件。

jGestures

一個jQuery插件創建活動，如開合，旋轉，輕掃手勢，挖掘和檢測設備的方位變化。

棘手的

一個非常小的JavaScript庫（小於2KB），有助於處理觸摸事件。這是一個獨立的庫，沒有依賴關係（如jQuery）。

◎創建響應網格:

Gridpak

的在線工具來創建自定義的靈活的網格。數列，填充和排水溝是可以改變的，有些可以添加斷點，和CSS生成，可供下載。該工具的加：它提供了一個PNG網格模板，可用於例如在Photoshop設計。

FluidGrids

另一種工具，將產生一個負責任的網格佈局CSS。

Responsive Calculator

的在線工具，將幫助你當你要打開響應百分比的像素設計。

Responsive Grid System

的響應網格系統是不是一個框架。這不是一個樣板。這是一個快速，簡單和靈活的方式來創建一個具有響應性的網站。

◎創建靈活和複雜的佈局的簡便方法

Masonry

的jQuery插件來創建動態和自適應的網格。該插件將重新安排，使它們適合在開放的網格點上的元素。

Isotope

另一個JavaScript插件，它重新安排一格的元素，但也提供了一種方法來過濾這些元素。

The Wookmark jQuery Plugin

jQuery插件，它會自動安排和元素組織成列在網格上。

◎處理響應設計的導航

如何處理在小屏幕上的導航，可以提供一個巨大的問題。這裡有一些資源和文章，試圖回答這個問題。

Responsive Navigation Patterns

這是不是一個工具或腳本，但最常見的趨勢，總結了一篇文章，每一個設計師都應該閱讀時處理響應導航，為每個解決方案的利弊。

TinyNav

一個jQuery插件，簡單地轉換成小屏幕上的選擇下拉菜單中的導航列表。

Mobile Navigation jQuery Plugin

另一個插件，將其轉換到一個小屏幕上的下拉列表中的導航鏈接。

◎Responsive Sliders (without swipe)

有一個漂亮的幻燈片，真的可以在網站上添加一些交互性，這是一個很好的方式，在投資組合中，產品或簡單的圖像顯示工作。一些不錯的解決方案已經發展到現在允許移動用戶也有很好的幻燈片。

Responsive CSS3 Slider

一個CSS3 CSS3滑塊滑塊，將適應瀏覽器的大小。與此滑塊是好的技巧的箭頭往裡走在小屏幕上的幻燈片。因為它是CSS3，有沒有JavaScript的需要（但不支持CSS3的瀏覽器的JavaScript修復）。

ResponsiveSlides

基於jQuery的一個微小的JavaScript，將創建一個小的響應滑塊，使用無序列表。

Blueberry

另一個JavaScript基於jQuery的幻燈片，將適應瀏覽器的大小。

Panoramica

的JavaScript插件，使網頁設計師，共創美好的滑塊，可定制的圖像和文字內容。

◎Touch Swipe Sliders

響應的滑塊是偉大的，但有點令人沮喪的移動電話或平板電腦時，大部分用戶都習慣於刷卡的本機應用程序之間的圖像畫廊。因此，一些開發者已經創建了一些推桿，將與“刷卡”的手勢。

Swipe JS

一個非常簡單的JavaScript滑塊之間不同的面板插件，使用戶能夠刷卡。你可以把圖片，文字，和這些面板的任何HTML中。

Sutunam Swipe Slider

滑塊在滑塊和全屏滑蓋版。用戶可以刷卡，或者使用箭頭按鈕來選擇。

PhotoSwipe

創建圖像畫廊和滑塊，在手機上最知名的JavaScript插件，此插件的靈感的iOS原生畫廊，但支持Android和黑莓。

◎Image Solutions for Retina Display Devices

隨著新的iPad 3的視網膜顯示器上，圖像的設備，可以顯示他們已成為越來越重要的服務質量。以下工具提供了簡單的解決方案，針對那些視網膜設備，並提供更好的服務質量的圖像。

Adaptative Images

一種基於JavaScript的解決方案，它能夠檢測到訪問者的屏幕尺寸，而無需任何代碼更改為正確的圖像。這個腳本需要htaccess訪問。

Retina Images

一種基於JavaScript的解決方案，如果提供的話，當用戶有一個視網膜顯示設備，切換當前圖像的@ 2倍。在這裡，沒有需要改變的HTML代碼。

Retina.js

另一個JavaScript的解決方案，為2倍的與視網膜的設備，為用戶切換圖像。這個腳本還配備了較低的積分。

◎測試設計

有一些重要的資源，是偉大的，但不是每個人都得到了測試設計的手機和平板電腦，所以我會完成這展示了一些有用的工具，為響應測試。

Resizer Bookmarklet

這是一個書籤拖放在書籤欄，然後創建一個下拉菜單，手機瀏覽器功能和屏幕尺寸。

Screenqueri.es

一個漂亮的新工具，可讓您測試使用像素完美的界面和一些默認的手機和平板電腦的瀏覽器大小的設計。

Responsivepx

這是一個工具，可以幫助你找到你一直在尋找棘手的斷點。