響應式 Web 設計必備的 12 款 CSS 架構

目前接入互連網中的裝置的多樣性，催生了新的Web布局設計方式——響應式設計。響應式設計的理念是，頁面的設計與開發應當根據使用者行為以及裝置環境（系統平台、螢幕尺寸、螢幕定向等）進行相應的響應和調整。這樣開發人員就無需針對每種裝置及解析度分別建立獨立的布局。

本文整理12款針對響應式布局設計的CSS架構，可以使你的開發工作變得輕鬆，並節省你的時間和成本。

1.  Skeleton

Skeleton是一系列CSS和JS檔案的集合，它可以幫你快速地調整網頁在不同解析度下的顯示效果，無論是17寸的膝上型電腦還是一個iPhone。Skeleton以輕量級的960網格系統為基礎，可以優雅地等比例縮放案頭、平板、手機上的瀏覽尺寸。

2.  Less Framework

Less架構是一個用於設計自適應網站的CSS網格系統，它包含4個布局和3套預設布局，這些都以一個單一網格為基礎。Less架構的目標是更高效地建立多布局網站，並在布局之間保持一致。

3.  Foundation

Foundation是一個易用的、強大的、靈活的架構，用於建立運行於任何裝置上的網站原型和最終產品代碼。Foundation包含幾十種風格和元素，你可以快速將它們進行組合，然後通過布局和設計，形成最終產品。

4.  The 1140 CSS Grid

1140網格可以完美適應1280解析度顯示器。在較小的顯示器上，它可以根據瀏覽器的寬度變成流體形式，並自適應瀏覽視窗。

5.  Golden Grid System

Golden網格系統是為增強網頁相容性設計的摺疊式網格，具有四個特徵：列、跨頁、底線、指令碼。

6.  Frameless Grid

Frameless和Golden Grid System類似，是通過逐列（column by column）形式來自適應頁面配置，而不是通過逐像素（pixel by pixel）形式。Frameless不是一個架構，因為它不包含任何代碼，它只是一個特定類型的自適應網格的想法，你可以將它作為設計工作的一個很好的出發點。

7.  MQFramework

MQFramework是一個響應式CSS架構，它使用@media屬性，允許你針對任何大小的瀏覽器設計你的網站。

8.  InuitCSS

該架構用於使用較少的代碼實現在較小螢幕（平板電腦、手機）上啟動並執行項目，支援IE6+。

9.  Fluid Baseline Grid

Fluid Baseline網格系統是一個HTML5 & CSS3開發套件，為網站快速設計提供了堅實的基礎。

10.  HTML5 Boilerplate

HTML5 Boilerplate基於HTML/CSS/JS模板，可以協助開發人員使用HTML5技術快速開發穩健、功能齊全的網站。你可以把它當作自己的新項目模板，在此基礎上建立自己的項目。

該模板包含了協助開發HTML5網站和應用程式的組件和一些優秀的最佳實務，只需開發人員最少的前期工作，就能為項目提供一個非常穩固的基礎。另外，該模板是高度可定製，可輕鬆刪除不需要的一些特性。

11.  320 and Up

320 and Up使用一個小型螢幕樣式表，以防止行動裝置載入案頭資源。其中樣式表中包含了一些顏色、排版布局等設定屬性。

12.  Amazium

Amazium是一個基於960網格系統的響應式架構，使用4個主要的媒體查詢來調整你的網站布局，以和裝置螢幕相匹配。

原文：
popular css frameworks for modern web layout design