随着移动设备的普及，响应式网站设计成为了一个必不可少的技能。下面我们将介绍 15 个最佳的响应式设计工具和资源，这些工具和资源能够帮助你更轻松地创建出美观的响应式网站。
1. Bootstrap
Bootstrap 是一个流行的前端框架，为响应式设计提供了很多组件和布局等常用元素。Bootstrap 还提供了全面的文档和示例代码，让你更好的学习和使用它。
示例代码：
-- -------------------- ---- ------- ---- ------------------ ---- ------------ ---- ----------------- ---- -------------------- ----------------------- ------ ---- ----------------- ---- -------------------- ----------------------- ------ ---- ----------------- ---- -------------------- ----------------------- ------ ------ ------展开代码
2. Foundation
Foundation 是另一个流行的响应式前端框架，也提供了很多组件和布局等常用元素。与 Bootstrap 类似，Foundation 也提供了全面的文档和示例代码。
示例代码：
-- -------------------- ---- ------- ---- ------------ ---- -------------- --------- ---- -------------------- ----------- ------ ---- -------------- --------- ---- -------------------- ----------- ------ ---- -------------- --------- ---- -------------------- ----------- ------ ------展开代码
3. Semantic UI
Semantic UI 是一个响应式前端框架，它的设计风格非常漂亮。它也提供了很多组件和布局等常用元素，并且有一个非常完整的文档和社区支持。
示例代码：
-- -------------------- ---- ------- ---- --------- ----- ------ ------ ---- --------------- ---- --------------------- ------ ---- --------------- ---- --------------------- ------ ---- --------------- ---- --------------------- ------ ------展开代码
4. Materialize
Materialize 是一个响应式前端框架，来源于 Google 的 Material Design 设计风格。它提供了很多组件和布局等常用元素，也提供了非常详细的文档和示例代码。
示例代码：
-- -------------------- ---- ------- ---- ------------ ---- ---------- ---- ---- --------------------- ------ ---- ---------- ---- ---- --------------------- ------ ---- ---------- ---- ---- --------------------- ------ ------展开代码
5. Susy
Susy 是一个响应式的网格系统，它提供了一个简单的方式来创建响应式网格。使用 Susy 可以更灵活地控制你的布局。
示例代码：
-- -------------------- ---- ------- ---------- - -------- ---------- - -------- - -------- --------------------- -------- --------------------- -------- ------ -------- ------------ ----- -展开代码
6. Gridlex
Gridlex 是另一个响应式的网格系统，它提供了一种简单的方式来创建响应式网格。与 Susy 不同的是，Gridlex 需要你设置一些额外的 class，来指定不同的布局。
示例代码：
-- -------------------- ---- ------- ---- ------------ ---- ---------------- -------- -------- ---------- ---- --------------------- ------ ---- ---------------- -------- -------- ---------- ---- --------------------- ------ ---- ---------------- -------- -------- ---------- ---- --------------------- ------ ---- ---------------- -------- -------- ---------- ---- --------------------- ------ ------展开代码
7. Fittext
Fittext 是一个 jQuery 插件，它可以调整文本的字体大小，以适应其所在的容器大小。这样可以让你的网站更容易适应不同的屏幕大小。
示例代码：
<h1 class="fittext">Welcome</h1>
8. Picturefill
Picturefill 是一个响应式图片加载的 JavaScript 插件，它可以根据屏幕大小加载不同大小的图片，以提高网站的性能。它还支持 art direction，就是根据屏幕大小加载不同的图片版本。
示例代码：
-- -------------------- ---- ------- ----- ------------ ----------- ----- ----- ---- -- --- ----- ------ -- ------ ----- ---------- ----- ---------------------------- ----- --------------------- ----------------------- --------------- ----- -------------------- ----------------------- --------------- ----- ------------------------- ----------------------- ---------------- ---- -------- ------- --- ------ --------- ---- --- --- -- --- -------- ----------- ------ -------- --- -------------- ---------------- ------ ----- ----- ---- -- --- ----- ------ -- ------ ----- --------------------- -------展开代码
9. Respond.js
Respond.js 是一个 JavaScript 插件，可以让 IE6-8 支持响应式设计。它可以根据媒体查询动态地加载 CSS 样式。
示例代码：
<script src="js/respond.min.js"></script>
10. Modernizr
Modernizr 是一个 JavaScript 库，可以检测浏览器支持哪些 HTML5 和 CSS3 特性。它可以让你针对不同的浏览器，提供不同的 CSS 样式。
示例代码：
if (Modernizr.touch) { // 给触摸屏设备添加一些样式 } else { // 给非触摸屏设备添加一些样式 }
11. Typecast
Typecast 是一个在线字体设计工具，它能让你尝试不同的字体，找到最适合你的网站的字体。它还可以生成 CSS 样式，让你更方便地应用到你的网站上。
示例代码：
<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/abcdef/12345/css/fonts.css">
12. Font Awesome
Font Awesome 是一个非常流行的图标字体库，它提供了大量的图标和 CSS 样式，使你可以轻松地添加图标到你的网站中。
示例代码：
<i class="fa fa-envelope"></i>
13. Normalize.css
Normalize.css 是一个 CSS 样式库，它可以让你更好地处理浏览器之间的差异。它提供了一些默认的样式，帮助你更容易地开始你的网站设计。
示例代码：
<link rel="stylesheet" type="text/css" href="css/normalize.css">
14. Baseline
Baseline 是一个 CSS 框架，它基于网格系统和基线网格系统，可以帮助你更好地构建响应式网站。
示例代码：
<div class="grid baseline-grid"> <div class="unit one-whole"> <h1>Hello World</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div>
15. CodePen
CodePen 是一个在线代码编辑器，它让你可以更好地学习和实践前端技术。CodePen 还提供了很多优秀的示例，让你能够学习到更多的前端技术。
以上是 15 个最佳的响应式设计工具和资源，它们能够帮助你更轻松地创建出美观的响应式网站。希望这篇文章能够给你带来帮助，让你更好地掌握响应式设计技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bec9570c976d473a30893a
