在當今互聯(lián)網(wǎng)產(chǎn)業(yè)，響應(yīng)式網(wǎng)絡(luò)設(shè)計變得越來越重要。用戶可通過對網(wǎng)絡(luò)的縮放、平滑、滾動等小操作進行閱讀和導(dǎo)航，從而可以獲得從桌面到手機等多種平臺的相同用戶體驗。

在網(wǎng)絡(luò)上有很多種基于響應(yīng)式網(wǎng)絡(luò)設(shè)計技術(shù)的CSS網(wǎng)格系統(tǒng)，比較有名的、等，我們今天要介紹它們？不， 不！不同的人習慣和偏好不同，好的不一定是對的，何況你們對它們太熟悉了不是？我們現(xiàn)在要做的就是盡可能的羅列出更多有用的響應(yīng)式CSS網(wǎng)格框架，供大家來選擇。下面就是為大家推薦的13款響應(yīng)式CSS網(wǎng)格框架：

1.Gumby - 960網(wǎng)格系統(tǒng)的響應(yīng)式CSS框架

Gumby是一種新的960網(wǎng)格系統(tǒng)的響應(yīng)式CSS框架，它包含擁有不同列變化（12列、16列及兩種混合）的多種類型的CSS網(wǎng)格，允許你通過優(yōu)化桌面和移動設(shè)備上現(xiàn)有的流動或固定布局來創(chuàng)建新的靈活布局。

2.ResponsiveAeon – HTML5的網(wǎng)格系統(tǒng)框架

ResponsiveAeon是Aeon 的一個新版本框架，它有一個基于12列、全寬1104px的響應(yīng)式網(wǎng)格系統(tǒng)。它的全部框架都是由HTML5設(shè)計的——將包括article、aside、details、 figcaption、figure、 footer、 header、 hgroup、menu、nav、 section、dialog、 audio、 canvas、video等HTML5新元素都加入進 html.js 文件里了。整個框架只有120多行代碼和3個基本類（1個Container類，另外2個是Content 和 Col類），它能夠讓你容易快速的構(gòu)建簡單、干凈、漂亮的模型/線框圖甚至是成熟的網(wǎng)站。

3.Ingrid - CSS流動布局系統(tǒng)

Ingrid是一個簡單、容易使用、輕量級的CSS流動布局系統(tǒng)，它的設(shè)計的主要目的是為了減少個體單位中對類的使用，以確保其在響應(yīng)式布局里更具條理化。Ingrid同樣是一個可擴展的系統(tǒng)，用戶可很容易的根據(jù)自己的需求進行定制。

4.Titan Framework

Titan Framework 是一個簡單易使用的用于創(chuàng)建響應(yīng)式網(wǎng)絡(luò)設(shè)計的CSS框架，它使用與960網(wǎng)格系統(tǒng)完全相同的CSS類。所以，如果你已經(jīng)有用960網(wǎng)格系統(tǒng)開發(fā)的網(wǎng)站，可以通過將960網(wǎng)格系統(tǒng)的CSS文件替換為Titan Framework的CSS文件的方式在幾分鐘以內(nèi)將它切換為Titan Framework的響應(yīng)式設(shè)計。另外值得一提的是，使用Titan Framework可以在最大寬度下適應(yīng)任何尺寸的屏幕分辨率。

5.Foundation 3

Foundation 3是由Saas CSS預(yù)處理器構(gòu)建的最好最先進的前端響應(yīng)式框架之一。 這個基于靈活CSS網(wǎng)格的完整框架可以快速和有邏輯性的創(chuàng)建漂亮的頁面布局，使系統(tǒng)充滿靈活性和可嵌套性。 此外，框架還提供各種類型的風格和web元素（比如創(chuàng)建可點擊原型的形式、按鈕和標簽）。

6.Gridiculous – 完全響應(yīng)式樣板

Gridiculous是一個基于12列網(wǎng)格的完全響應(yīng)式樣板，你可以設(shè)置站點的最大寬度為1200px、 960px、 640px、320px或者延伸至全寬。使用Gridiculous框架，不管使用的屏幕大小，你都可以在分隔開各列、為各列創(chuàng)建嵌套的同時確保圖片和視頻保持充分響應(yīng)。

7.Responsive Grid System

Responsive Grid System是一個基于流動網(wǎng)格的CSS框架 。它被用于響應(yīng)式網(wǎng)站的快速直觀開發(fā)。所有媒體庫都可在標準設(shè)備、清除浮動和可選重置中使用12、16和24列的網(wǎng)格。

8.1140 CSS Grid

1140 CSS Grid是一個基于12列網(wǎng)格的CSS響應(yīng)式網(wǎng)格系統(tǒng)，它對于創(chuàng)建桌面和移動設(shè)備上的網(wǎng)站來說十分友好——完全支持1280的桌面顯示器和更小的移動設(shè)備顯示屏。這個框架具有很強的流動性，從移動設(shè)備到平板電腦，瀏覽器的寬度能夠自動調(diào)整。所有的12列會被分成每部分2列、3列、4列或者6列或者是許多不均勻的組合，比如5列加7列，或者是5列加4列加3列。

9.Less+ Framework

Less+ Framework是流行的CSS網(wǎng)格框架Less Framework的擴展版，這兩個框架之間唯一的區(qū)別是Less+ Framework提供了對IE的支持。 Less+允許設(shè)計者和開發(fā)者構(gòu)建能夠根據(jù)瀏覽器屏幕分辨率來修改內(nèi)容的網(wǎng)站。

10.Susy – 用于指南針性質(zhì)的響應(yīng)式CSS網(wǎng)格

Susy是一個響應(yīng)方式如同抽象的指南針一樣的CSS網(wǎng)格系統(tǒng)。它的內(nèi)部是流動的，可在任何時候做好響應(yīng)的準備，通過把你的選擇裝在“糖果盒”里，在你確定讓它們在何時何地怎么做時進行快速響應(yīng)。

11.YAMB - “移動設(shè)備上的又一個樣板”

YAMB是Yet Another Mobile Boilerplate的簡稱 （直譯“移動設(shè)備上的又一個樣板”），它是一個小型的全套工具和快速設(shè)計響應(yīng)式網(wǎng)站的向?qū)АＫ杏肶AMB設(shè)計的網(wǎng)站，小到320 px 屏幕的手機大到智能手機和平板電腦，都是經(jīng)過了特別優(yōu)化的。

12.Wirefy

Wirefy是一個基于響應(yīng)式瀏覽器的線框圖框架，它擁有卓越的用戶體驗和測試功能特性（是用于找尋解決客戶端通信問題的最好方法），能夠快速構(gòu)建令人印象深刻的網(wǎng)絡(luò)設(shè)計和布局。由于框架的高度靈活性，它被廣泛應(yīng)用于各種響應(yīng)式網(wǎng)絡(luò)設(shè)計、網(wǎng)絡(luò)應(yīng)用程序和基本設(shè)備的應(yīng)用程序。

13. Amaze UI -國產(chǎn)開源的HTML5 跨屏前端框架  

是一款輕量級，高性能的CSS網(wǎng)格系統(tǒng)，是中國首個開源的HTML5 跨屏前端框架 ，它采用先進的 mobile first 理念 ，從小到大，對所有不同尺寸的屏幕進行適配。 Amaze UI包含了多個組件，提供幾十個主題的 Widgets ，能極大提高開發(fā)的效率，此外，它還提供本地化支持，中文的排版效果相當不錯。

本文的主要內(nèi)容翻譯自