响应式 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