用於響應式網頁設計的 50 個有用的庫和資源
讓我們談談響應式網頁設計。人們越來越依賴他們的智能移動設備，您網站的大部分訪問者很可能已經使用他們的手機或平板電腦訪問它。在本文中，您將找到 50 篇文章、工具和資源，它們將幫助您了解什麼是響應性，以及如何將這些技術應用於您當前的網站。學習愉快！
基礎知識
讓我們從這些解釋響應性基本概念的文章開始。
1。讓它響應
Google 的“Make it Responsive”是該主題的一個很好的介紹。它將帶您進入響應式網頁設計。在本課程中，您將構建一個適用於多種屏幕尺寸和設備類型的網站。他們還有其他我們推薦的有用指南。
2。 MDN 的響應式網頁設計教程
這是一篇很好的 MDN 文章，介紹了人們用來實現響應性的一些基本策略，例如流動或流動佈局、媒體查詢和流動圖像。他們還強調了指向響應式網頁設計外部資源的有用鏈接。
3。 5 種真正有用的響應式網頁設計模式
DesignShack 的精彩文章包含許多示例模式，可以幫助您規劃自己的頁面佈局。其中一些示例非常簡單，而其他示例則提供了有關如何排列 HTML 元素的更具想像力的想法。
4。響應式網頁設計教程
Shayhowe 提供了一系列關於網頁設計的優秀課程。其中一個教您如何使任何頁面都適合移動設備。它們從響應能力的基礎開始，然後發展到使任何頁面在不同屏幕尺寸下完美查看的不同方式。
5。響應式網頁設計的 9 條基本原則
Froont 撰寫了這篇奇怪的文章，向我們展示了用於製作響應式 Web 應用程序的不同策略之間的區別。他們因使用酷炫的動畫來展示每種技術的優勢而獲得加分。這是學習新事物的一種非常有趣的方式。
6。 A List Apart 的響應式網頁設計教程
一篇關於響應式設計的深入文章，涵蓋流體設計和媒體查詢等主題。無論您是剛接觸 Web 開發移動友好型應用程序的新手，還是已經完成了一些響應式項目，您都可以在這個出色的資源中找到一些值得學習的東西。
7。響應式設計分 3 步完成
本教程旨在向您展示響應式設計的基礎知識。它很短，只關注最重要的方面。它在視口元標記上提供了一個有用的部分，以便您的網站可以完美地適應屏幕。
8。界面示意圖
這不是指南，但仍然很有用。這是一組適用於網絡、移動和平板電腦平台的免費草圖模板。模板為 PDF 格式，包含多個頁面和佈局。只需下載一個模板，打印出您需要的頁面，然後開始繪製您的下一個響應式設計。
CSS 框架
手動編寫響應式 CSS 需要大量經驗，而且大多數情況下，使用框架會更好。以下是一些最好的列表。
9。墨水
快速創建適用於任何設備和客戶端的響應式 HTML 電子郵件。甚至展望。隨處發送電子郵件。在任何設備上。 HTML 電子郵件是如何被閱讀的。
10.骨架
Skeleton 是一個小的 CSS 文件集合，可以幫助您快速開發任何尺寸（從桌面到移動設備）看起來都很漂亮的網站。該框架由一個包含必要初始標記的基本 html 頁面、一些可以幫助您設置頁面樣式的樣式表和一個包含的圖標集組成。
11.列式
Columnal CSS 網格系統是其他幾個的“混搭”，其中包含一些自定義代碼。它使響應式原型設計更容易一些。它是 1140px 寬，但由於它是流動的，它會響應大多數瀏覽器的寬度。
12.引導
Bootstrap 是這裡介紹的框架中最流行的，也許是最強大的。它適用於各種技能水平的人、各種形狀的設備和各種規模的項目。還有大量的引導插件可以用來擴展它。
13.更少的框架
Less Framework 是一個用於設計自適應網站的 CSS 網格系統。它包含 4 種佈局（默認、平板電腦、手機和寬手機）和 3 組排版預設，所有這些都基於單個網格。從佈局到佈局的唯一變化是列的數量和外邊距的寬度。
14. Entomic 的響應式 CSS
在幾分鐘內為台式機、平板電腦和智能手機上響應精美的網站佈局您的頁面。一種服務，提供根據流行的屏幕尺寸創建頁面佈局的選項。只需創建盒子並設置它們的寬度，導出佈局並開始使用它。
15.蘇西
在敏捷開發和超級平板電腦多魔法筆記本電腦的世界中，最好的佈局不能包含在單個框架或技術中。 CSS 庫是關於如何完成工作的大量意見。為什麼要讓台鋸告訴你把廚房放在哪裡？
16.簡單網格
Simple Grid 是另一個 CSS 網格框架。它力求簡單，所以如果你不需要像 bootstrap 這樣的所有額外功能，這個框架是一個不錯的選擇。
17.富拉托
輕量級和友好的前端框架來完成工作。無論您使用的是 Scss 還是 CSS，都非常容易啟動項目並立即完成工作。
JavaScript 和 jQuery 庫
還有一些有用的 jQuery 庫和插件可以為您的網站提供所需的額外響應魔法。
18.意圖
Intention.js 提供了一種輕量級且清晰的方法來以響應方式動態重構 HTML。一個元素的類在移動設備和平板電腦上應該是什麼？在桌面瀏覽器上查看時，廣告標記應該放在哪裡？該頁面是否需要觸控設備上的備用幻燈片小部件？這些都是 Intention.js 可以處理的場景，根據用戶的設備改變頁面。
19. J響應式
JResponsive 將以高效、動態和響應式佈局組織您的內容。它可以應用於容器元素，並將其子元素排列在一個佈局中，通過緊密“打包”它們來優化屏幕空間。
20。恢復穩定
jQuery ReStable 是一個非常簡單和輕量級 (~1Kb) 的 jQuery 插件，它可以讓表格響應式地折疊成 ul 列表。
21.響應式元素
響應式元素使任何元素都可以適應和響應它們所佔據的區域。這是一個小型 javascript 庫，您現在可以將其放入您的項目中。
22.不安的
Restive.JS 是一個 jQuery 插件，可幫助您快速輕鬆地向您的網站添加功能，使其能夠響應並適應幾乎所有支持 Web 的設備。通過結合使用設備檢測、高級斷點管理和方向管理，Restive.JS 將為您的網站提供一種不可思議的能力，在不斷變化的設備環境中保持穩健。
23.適合文本
FitText 使字體大小靈活。在您的流體或響應式佈局上使用此插件來實現填充父元素寬度的可擴展標題。哦，你不敢讓我們在段落文本上使用 FitText 來抓住你。這僅適用於巨大的顯示文本！
24.拼貼加號
這個 jQuery 插件將排列您的圖像以完全適合容器。這會產生類似於 Flickr 的個人資料頁面或 Google+ 相冊的效果。這個 jQuery 插件將排列您的圖像以完全適合容器。這會產生類似於 Flickr 的個人資料頁面或 Google+ 相冊的效果。
25。憲章家
您可能認為這只是另一個圖表庫。但是 Chartist.js 是一個對其他圖表庫提供的功能感到失望的社區的產物。當然還有數百個其他很棒的圖表庫，但是在使用它們之後，總會有一些你希望不包括在內的調整。
26.貓頭鷹旋轉木馬
支持觸控的 jQuery 插件，可讓您創建漂亮的響應式輪播滑塊。您可以添加無限數量的圖像，這些圖像可以通過黃油般流暢的動畫進行滑動。
27.滑動框
Swipebox 是一款適用於桌面、移動設備和平板電腦的 jQuery“燈箱”插件。
28.幻燈片
SlidesJS 是 jQuery (1.7.1+) 的響應式幻燈片插件，具有觸摸和 CSS3 過渡等功能。
29。滑翔
Glide.js 是響應式和触摸友好的 jQuery 滑塊。基於舊版瀏覽器的帶有 JS 後備的 CSS3 過渡。它簡單、輕便、快速。專為滑動而設計，不多也不少。
30。閃屏
一個很酷的 jQuery 插件，可以讓你快速瀏覽內容。它還具有完全響應和触控功能。
31.一頁滾動
使用 One Page Scroll 插件創建一個類似 Apple 的單頁滾動網站（iPhone 5S 網站）。
32.彈性滑塊
FlexSlider 是一個很棒的、完全響應的 jQuery 滑塊工具包。
33.皇家滑塊
RoyalSlider 是一個圖片庫和內容滑塊插件。
34.相機
相機幻燈片是一個開源項目，基於 Diapo 幻燈片，但改進了很多。
35。照片滑動
PhotoSwipe 是一個自包含的 JavaScript 庫，可以輕鬆集成到您的移動網站中。
36.響應式幻燈片
ResponsiveSlides.js 是一個微型 jQuery 插件，它使用容器內的元素創建響應式滑塊。
37.主滑塊
動畫內容和圖像滑塊中您想要的一切，都打包到一個很棒的插件中！
38.壯觀的彈出窗口
Magnific Popup 是一個響應式燈箱和對話框腳本，專注於性能並為任何設備上的用戶提供最佳體驗。
39.有理
這是一個 jQuery 插件，可以將照片排列在一個完美間隔的網格中，以補償照片的不同尺寸。在此處查看現場演示。
40。雙擊即可前往
這是適用於移動設備的多級導航菜單的概念。為了彌補缺乏真正的懸停事件，菜單選項在雙擊時被激活。
41.菜單-目標
Menu-Aim 是一個用於下拉菜單的 jQuery 插件，可以區分用戶懸停在下拉項目上和嘗試導航到子菜單的內容。
42。菜單管
Menutron 在調整瀏覽器大小時將您的導航菜單從列表轉換為選擇菜單。這對於有很多選項的導航菜單特別有用。
43。 SlickNav
調整瀏覽器大小時，SlickNav 會將您的導航菜單轉換為漢堡菜單。
44.錫德
用於創建響應式側邊菜單的 jQuery 插件。它們可以從左側或右側顯示。
45。大幻燈片
BigSlide 是一個很小的（約 1kb 壓縮）jQuery 插件，用於創建屏幕外滑動面板導航。
46。 FitVids
一個輕量級、易於使用的 jQuery 插件，用於流體寬度視頻嵌入。 FitVids 將 Thierry Koblentz 的內在比率方法自動化，以在您的響應式網頁設計中實現流體寬度視頻，並且非常易於使用。
47. Adobe Edge
測試移動佈局很痛苦。為了幫助您，Adobe 創建了 Edge Inspect。對於需要在多個移動設備上預覽其內容的 Web 開發人員和設計人員來說，它是必不可少的應用程序。
48.我可以使用...嗎？
並非所有 CSS 功能都可在移動設備上使用。為確保移動設備上沒有缺少任何功能，您可以使用 caniuse，這是獲取最新瀏覽器支持表的首選網站。
49.我有反應嗎？
“我有反應嗎？”幫助您查看您的網站是否是響應式網站。這也是一次在多個設備上快速截取頁面截圖的好方法。
50。設備模式和移動仿真
谷歌還開發了一種測試移動佈局的方法。如果您使用 Google Chrome，您可以直接從您的開發者工具中嘗試設備模式和移動仿真，甚至可以嘗試在連接到您的計算機的 Android 智能手機上進行遠程調試。
結論
我們希望您發現所有這些響應式插件和資源都很有用！它們將為您提供響應式設計的良好開端，以及許多用於創建下一個出色設計的工具。我們錯過了什麼嗎？在評論區告訴我們:)
