目前接入互聯(lián)網(wǎng)中的設(shè)備的多樣性，催生了新的Web布局設(shè)計(jì)方式——響應(yīng)式設(shè)計(jì)。響應(yīng)式設(shè)計(jì)的理念是，頁(yè)面的設(shè)計(jì)與開(kāi)發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等）進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。這樣開(kāi)發(fā)者就無(wú)需針對(duì)每種設(shè)備及分辨率分別創(chuàng)建獨(dú)立的布局。
本文整理12款針對(duì)響應(yīng)式布局設(shè)計(jì)的CSS框架，可以使你的開(kāi)發(fā)工作變得輕松，并節(jié)省你的時(shí)間和成本。
1. Skeleton Skeleton是一系列CSS和JS文件的集合，它可以幫你快速地調(diào)整網(wǎng)頁(yè)在不同分辨率下的顯示效果，無(wú)論是17寸的筆記本電腦還是一個(gè)iPhone。Skeleton以輕量級(jí)的960網(wǎng)格系統(tǒng)為基礎(chǔ)，可以優(yōu)雅地等比例縮放桌面、平板、手機(jī)上的瀏覽尺寸。
2. Less Framework Less框架是一個(gè)用于設(shè)計(jì)自適應(yīng)網(wǎng)站的CSS網(wǎng)格系統(tǒng)，它包含4個(gè)布局和3套預(yù)設(shè)布局，這些都以一個(gè)單一網(wǎng)格為基礎(chǔ)。Less框架的目標(biāo)是更高效地創(chuàng)建多布局網(wǎng)站，并在布局之間保持一致。
3. Foundation Foundation是一個(gè)易用的、強(qiáng)大的、靈活的框架，用于創(chuàng)建運(yùn)行于任何設(shè)備上的網(wǎng)站原型和最終產(chǎn)品代碼。Foundation包含幾十種風(fēng)格和元素，你可以快速將它們進(jìn)行組合，然后通過(guò)布局和設(shè)計(jì)，形成最終產(chǎn)品。
4. The 1140 CSS Grid 1140網(wǎng)格可以完美適應(yīng)1280分辨率顯示器。在較小的顯示器上，它可以根據(jù)瀏覽器的寬度變成流體形式，并自適應(yīng)瀏覽窗口。
5. Golden Grid System Golden網(wǎng)格系統(tǒng)是為增強(qiáng)網(wǎng)頁(yè)兼容性設(shè)計(jì)的折疊式網(wǎng)格，具有四個(gè)特征：列、跨頁(yè)、底線、腳本。
6. Frameless Grid Frameless和Golden Grid System類似，是通過(guò)逐列（column by column）形式來(lái)自適應(yīng)頁(yè)面布局，而不是通過(guò)逐像素（pixel by pixel）形式。Frameless不是一個(gè)框架，因?yàn)樗话魏未a，它只是一個(gè)特定類型的自適應(yīng)網(wǎng)格的想法，你可以將它作為設(shè)計(jì)工作的一個(gè)很好的出發(fā)點(diǎn)。
7. MQFramework MQFramework是一個(gè)響應(yīng)式CSS框架，它使用@media屬性，允許你針對(duì)任何大小的瀏覽器設(shè)計(jì)你的網(wǎng)站。
8. InuitCSS 該框架用于使用較少的代碼實(shí)現(xiàn)在較小屏幕（平板電腦、手機(jī)）上運(yùn)行的項(xiàng)目，支持IE6+。
9. Fluid Baseline Grid Fluid Baseline網(wǎng)格系統(tǒng)是一個(gè)HTML5 & CSS3開(kāi)發(fā)工具包，為網(wǎng)站快速設(shè)計(jì)提供了堅(jiān)實(shí)的基礎(chǔ)。
10. HTML5 Boilerplate HTML5 Boilerplate基于HTML/CSS/JS模板，可以幫助開(kāi)發(fā)者使用HTML5技術(shù)快速開(kāi)發(fā)穩(wěn)健、功能齊全的網(wǎng)站。你可以把它當(dāng)作自己的新項(xiàng)目模板，在此基礎(chǔ)上建立自己的項(xiàng)目。
該模板包含了幫助開(kāi)發(fā)HTML5站點(diǎn)和應(yīng)用程序的組件和一些優(yōu)秀的最佳實(shí)踐，只需開(kāi)發(fā)者最少的前期工作，就能為項(xiàng)目提供一個(gè)非常穩(wěn)固的基礎(chǔ)。另外，該模板是高度可定制，可輕松刪除不需要的一些特性。
11. 320 and Up 320 and Up使用一個(gè)小型屏幕樣式表，以防止移動(dòng)設(shè)備加載桌面資源。其中樣式表中包含了一些顏色、排版布局等設(shè)置屬性。
12. Amazium Amazium是一個(gè)基于960網(wǎng)格系統(tǒng)的響應(yīng)式框架，使用4個(gè)主要的媒體查詢來(lái)調(diào)整你的網(wǎng)站布局，以和設(shè)備屏幕相匹配。
原文：
popular css frameworks for modern web layout design 
