响应式 Web 设计 旨在为各种设施（从台式机显示器到手机）提供最佳的浏览体验。本文汇总了一些优良的响应式 Web 设计 HTML 和 CSS 框架。这些框架都是开源的并收费的。
对响应式 Web 框架进行比拟并不那么容易。有的框架适宜设计更快、更精简网站的某些性能，而有些可能提供了大量性能、插件和附加组件，然而可能体积会比拟宏大并且上手较难。
1. Bootstrap
Bootstrap 是 最风行的 HTML、CSS 和 JS 框架，用于在 Web 上开发响应式、挪动优先我的项目。Bootstrap 使前端开发更快、更轻松。他们提供了大量的文档、示例和演示，能够帮你疾速进行响应式 Web 开发。在 Bootstrap 5 中做了一些重大更改，例如随便应用 jQuery 并增加了 RTL 反对，再加上现成的组件和工具类，使 Bootstrap 成为 Web 开发人员的最佳抉择之一。
你还能够找到许多收费的高级 bootstrap 模板 和 UI 工具包，这使你的开发过程更加轻松。
官网：https://getbootstrap.com/
2. Tailwind CSS
Tailwind 提供了一种基于实用工具的古代办法来构建响应站点。它有大量的实用工具类，无需编写 CSS 即可构建古代网站。它与其它框架的不同之处在于须要通过开发设置来放大最终 CSS 的大小，因为如果应用默认值，最终将会失去一个很大的 CSS 文件。Tailwind 可能疾速将款式增加到 HTML 元素中，并提供了大量的开箱即用的设计款式。这里有大量的 Tailwind CSS 资源：https://superdevresources.com…。
官网：https://tailwindcss.com/
3. Tachyons
Tachyons 也是一个基于实用工具的 CSS 库，它提供了许多即装即用的简单性能，无需本人编写大量 CSS。这样做的益处是 Tachyons 的开箱即用款式很笨重，不须要其余设置。如果需要的话，依然能够通过一些办法来减小尺寸。如果你须要易用的实用工具库，那么这应该是一个不错的抉择。
官网：https://tachyons.io/
4. Foundation
Foundation 是由产品设计公司 ZURB 制作的自适应前端框架。这个框架是他们自 1998 年来构建 Web 产品和服务的后果。Foundation 是最先进的响应式前端框架，并且提供了许多自定义性能。
官网：http://foundation.zurb.com/
5. Material Design for Bootstrap (MDB)
MDB 建设在 Bootstrap 之上，并提供了开箱即用的资料设计外观。它具备杰出的 CSS 库，并且与大多数风行的 JavaScript 框架（如 jQuery、Angular、React 和。Vue.js）兼容。其外围库是完全免费应用的。
官网：https://mdbootstrap.com/
6. UIkit
UIkit 是一个轻量级的模块化前端框架，用于开发疾速且弱小的 Web 界面。UIkit 提供了 HTML、CSS 和 JS 组件的全面汇合，这些组件易于应用，易于定制和扩大。UIkit 采纳挪动优先的办法，可提供从手机、平板电脑到台式机的统一体验。
官网：http://getuikit.com/
7. Pure CSS
Pure.css 是一组小型的响应式 CSS 模块，能够用在任何一个 Web 我的项目中。Pure 的体积小的几乎过分。比方残缺的时钟模块 最小化压缩版本仅为 4.0 KB。Pure 基于 Normalize.css 构建，并提供原声 HTML 元素以及最常见的 UI 组件的布局和款式。Pure 具备开箱即用的响应能力，所以元素在所有屏幕尺寸上都看起来不错。
官网：http://purecss.io/
8. Material Design Lite Framework (MDL)
Google 的 Material Design Lite 框架是最风行的 CSS 框架之一，可为你的网站增加 Material Design 外观。它不依赖任何 JavaScript 框架，能够跨设施应用，并且能够针对较旧的浏览器进行降级。它的构建充分考虑了可拜访性，并提供了丰盛的文档和入门模板。
官网：https://getmdl.io/
9. Materialize
Materialize 是基于 Material Design 的古代响应式前端框架。Google 的资料设计是一种风行的设计趋势，波及卡片、暗影和动画。
官网：http://materializecss.com/
10. Skeleton
如果你要开发较小的我的项目，或者只是感觉本人不须要大型框架的所有实用工具，则能够试试 Skeleton。Skeleton 仅设置了大量规范 HTML 元素的款式，并蕴含一个网格。
Skeleton 中的网格是一个 12 列的流体网格，最大宽度为 960px，随着浏览器或设施的放大而放大。能够用一行 CSS 更改最大宽度，并且所有列的大小都会相应进行调整。其语法很简略，使响应式编码更加容易。
官网：http://getskeleton.com/
11. Bulma
Bulma 是基于 flexbox 的古代 CSS 框架。它提供了响应式设计和挪动设施优先的 UI 组件，并具备模块化构造，可让你只导入要蕴含在 Web 设计中的内容。Bulma 还提供了一个基于 flexbox 的古代网格零碎。
官网：http://bulma.io/
12. Semantic UI
Semantic UI 是一个高级 CSS 框架，提供了 50 多个 UI 元素，300 多个 CSS 变量用于自定义，并通过 EM 值构建以用于响应式设计。它也已筹备好 Flexbox。
Semantic 是可用于生产环境的 CSS 框架，并能与 React、Angular、Meteor 和 Ember 等框架整合，你能够通过与这些框架中进行集成将 UI 层与应用逻辑组织在一起。
官网：https://semantic-ui.com/
13. Milligram
Milligram 是一个极简的 CSS 框架，不依赖 JavaScript。它通过起码的款式设置用来疾速、洁净的创立响应式网站。它还提供了一个基于 flexbox 的网格零碎。
官网：https://milligram.github.io/
14. Spectre.css
Spectre.css 是一个轻量级的库，它提供了开箱即用的，基于 flexbox 的响应式和挪动敌对型布局。以在它的根底上依据本人的须要增加款式和响应实用工具。
官网：https://picturepan2.github.io…
15. Base CSS Framework
Base 也是一个轻量级 CSS 框架，可用于构建响应式网站。它为网站我的项目提供了收费的根底入门软件以及许多付费的现成模板。
官网：https://getbase.org/
如果对这些框架进行比拟，你会发现 Bootstrap、Tailwind 和 Foundation 的风行度远远当先于其余框架。
设计机构通常抉择 Bootstrap，因为它提供了开箱即用的组件，并且易于定制。这就是 Bootstrap 主题和库数量泛滥的起因.
本文首发微信公众号：前端先锋
欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章
欢送持续浏览本专栏其它高赞文章：
- 深刻了解 Shadow DOM v1
- 一步步教你用 WebVR 实现虚拟现实游戏
- 13 个帮你进步开发效率的古代 CSS 框架
- 疾速上手 BootstrapVue
- JavaScript 引擎是如何工作的？从调用栈到 Promise 你须要晓得的所有
- WebSocket 实战：在 Node 和 React 之间进行实时通信
- 对于 Git 的 20 个面试题
- 深刻解析 Node.js 的 console.log
- Node.js 到底是什么？
- 30 分钟用 Node.js 构建一个 API 服务器
- Javascript 的对象拷贝
- 程序员 30 岁前月薪达不到 30K，该何去何从
- 14 个最好的 JavaScript 数据可视化库
- 8 个给前端的顶级 VS Code 扩大插件
- Node.js 多线程齐全指南
- 把 HTML 转成 PDF 的 4 个计划及实现
- 更多文章 …