9个最佳响应式 CSS 框架

100人浏览 2024-08-26 10:33:25

1. Pure

Pure 非常轻量级，经过压缩后不过 3.8KB。这是一个特别为移动端考虑的框架，为了压缩大小，每一行代码都经过仔细考量。当然如果你不使用框架给出的全部模块，体量还可以更小。

主页：https://purecss.io/

Skeleton 如其名字，非常小巧，设计简约，麻雀虽小五脏俱全。网格系统，文本，表单，按钮，列表，表格，媒体查询等功能面面俱到。非常适合快速创建简约网站的需求。

主页：http://getskeleton.com/

另一个轻量级框架，体量可以与 Skeleton 和 Pure 相比，压缩后的预处理器仅仅 2KB 大小。Milligram 也使用了简约设计，模块几乎与 Skeleton 一致。当然，毫无疑问的是它也采用了基于 Flexbox 的网格系统。

主页：https://milligram.io/

一个优雅的 CSS 框架，Flexbox 响应式，相比于 Milligram 等体量较大，但也算是轻量级（~10KB）。设计者是一位中国人喔。

主页：
https://picturepan2.github.io/spectre/

一个 6KB 左右的框架，遵从扁平化，简约的设计风格。如果你想尝试类似于 MEB 风格的网页设计，这个框架应该可以较好的配合整体设计风格。

主页：
https://siimple.juanes.xyz/

UIKit 是功能全面的前端框架里较为轻量级的一个，它集成了 Sass 和 LESS 预处理器。其组件完善，命名独特，当然也可以用户定制。

主页：https://getuikit.com/v2/

如其名字所述，Semantic UI 非常语义化，易于使用，同时也能很好的与其他样式甚至框架集成。其模块也相当丰富，包括但不限于弹窗，下拉菜单，网格系统等等。顺带一提，这个框架文档的中文翻译做的还算不错。

主页：https://semantic-ui.com/

Bootstrap 至今仍是流行度非常高的框架，如今已经正式发布了第四版。Flexbox，Sass，rem，这些流行趋势 Bootstrap 都一个不落跟进到位。当然，相比于其他框架，Bootstrap 的资源（文章和教程、第三方插件和扩展、主题构建器等）一直十分丰富。

主页：https://getbootstrap.com/

Foundation 适用于网站和邮箱建设，是许多大型网站的选择，包括 Adobe，Amazon，Ebay，三星，剑桥大学等。易于上手对新手友好是它的一大特色。语义化，移动端优先，用户可定制模块使用三个特点使其广受欢迎。

主页：
https://foundation.zurb.com/