15 个优秀的响应式 CSS 框架

官网:http://foundation.zurb.com/

[](()5. Material Design for Bootstrap (MDB)

15 个优秀的响应式 CSS 框架_第1张图片

MDB 建立在 Bootstrap 之上,并提供了开箱即用的材料设计外观。它具有出色的 CSS 库,并且与大多数流行的 JavaScript 框架(如 jQuery、Angular、React 和。Vue.js)兼容。其核心库是完全免费使用的。

官网:https://mdbootstrap.com/

[](()6. UIkit

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nDF4Q79M-1651542351965)(https://img-blog.csdnimg. 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 cn/img_convert/04f9ff980525facf87fd7e5f71f6a4d4.png)]

UIkit 是一个轻量级的模块化前端框架,用于开发快速且强大的 Web 界面。UIkit 提供了 HTML、CSS 和 JS 组件的全面集合,这些组件易于使用,易于定制和扩展。UIkit 采用移动优先的方法,可提供从手机、平板电脑到台式机的一致体验。

官网:http://getuikit.com/

[](()7. Pure CSS

15 个优秀的响应式 CSS 框架_第2张图片

Pure.css 是一组小型的响应式 CSS 模块,可以用在任何一个 Web 项目中。Pure 的体积小的简直过分。比如完整的时钟模块最小化压缩版本仅为 4.0 KB。Pure 基于 Normalize.css 构建,并提供原声 HTML 元素以及最常见的 UI 组件的布局和样式。Pure 具有开箱即用的响应能力,所以元素在所有屏幕尺寸上都看起来不错。

官网:http://purecss.io/

[](()8. Material Design Lite Framework (MDL)

15 个优秀的响应式 CSS 框架_第3张图片

Google 的 Material Design Lite 框架是最流行的 CSS 框架之一,可为你的网站添加 Material Design 外观。它不依赖任何 JavaScript 框架,可以跨设备使用,并且可以针对较旧的浏览器进行降级。它的构建充分考虑了可访问性,并提供了丰富的文档和入门模板。

官网:https://getmdl.io/

[](()9. Materialize

15 个优秀的响应式 CSS 框架_第4张图片

Materialize 是基于 Material Design 的现代响应式前端框架。Google的材料设计是一种流行的设计趋势,涉及卡片、阴影和动画。

官网:http://materializecss.com/

[](()10. Skeleton

15 个优秀的响应式 CSS 框架_第5张图片

如果你要开发较小的项目,或者只是觉得自己不需要大型框架的所有实用工具,则可以试试 Skeleton。Skeleton 仅设置了少量标准 HTML 元素的样式,并包含一个网格。

Skeleton 中的网格是一个 12 列的流体网格,最大宽度为 960px,随着浏览器或设备的缩小而缩小。可以用一行 CSS 更改最大宽度,并且所有列的大小都会相应进行调整。其语法很简单,使响应式编码更加容易。

官网:http://getskeleton.com/

[](()11. Bulma

15 个优秀的响应式 CSS 框架_第6张图片

Bulma 是基于 flexbox 的现代 CSS 框架。它提供了响应式设计和移动设备优先的 UI 组件,并具有模块化结构,可让你只导入要包含在 Web 设计中的内容。Bulma 还提供了一个基于 flexbox 的现代网格系统。

官网:http://bulma.io/

[](()12. Semantic UI

15 个优秀的响应式 CSS 框架_第7张图片

Semantic UI 是一个高级 CSS 框架,提供了 50 多个 UI 元素,300 多个 CSS 变量用于自定义,并通过 EM 值构建以用于响应式设计。它也已准备好 Flexbox。

Semantic 是可用于生产环境的 CSS 框架,并能与 React、Angular、Meteor 和 Ember 等框架整合,你可以通过与这些框架中进行集成将 UI 层与应用逻辑组织在一起。

官网:https://semantic-ui.com/

[](()13. Milligram

15 个优秀的响应式 CSS 框架_第8张图片

Milligram 是一个极简的 CSS 框架,不依赖 JavaScript。它通过最少的样式设置用来快速、干净的创建响应式网站。它还提供了一个基于 flexbox 的网格系统。

官网:https://milligram.github.io/

[](()14. Spectre.css

am 是一个极简的 CSS 框架,不依赖 JavaScript。它通过最少的样式设置用来快速、干净的创建响应式网站。它还提供了一个基于 flexbox 的网格系统。

官网:https://milligram.github.io/

[](()14. Spectre.css

你可能感兴趣的