响应式 Web 设计必备的 12 款 CSS 框架

程序员文章站 2022-06-02 08:05:42

...

目前接入互联网中的设备的多样性，催生了新的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站点和应用程序的组件和一些优秀的最佳实践，只需开发者最少的前期工作，就能为项目提供一个非常稳固的基础。另外，该模板是高度可定制，可轻松删除不需要的一些特性。