什么是响应式设计？
响应式设计是一种网页设计方法，可以确保页面在各种设备上（如桌面、平板电脑和手机）都能正常显示。这种设计方法的目标是提供一致的用户体验，而不管用户使用何种设备来访问网站。
为什么需要 Respond.js 和 Modernizr？
在实现响应式设计时，有两个主要问题需要解决：
- 如何检测设备的功能和特性，以便为其提供相应的布局和样式？
- 如何确保旧版浏览器对新的 CSS 和 JavaScript 功能进行正确地支持？
Respond.js 和 Modernizr 是两个前端库，可以帮助解决这些问题。
Respond.js 是一个 JavaScript 库，可以检测浏览器是否支持 CSS3 Media Queries，并在不支持的浏览器中模拟它们。换句话说，这意味着您可以使用 CSS3 Media Queries 来设置响应式设计规则，并让 Respond.js 在不支持这些查询的浏览器中触发这些规则。
Modernizr 是一个 JavaScript 库，可以检测浏览器是否支持 HTML5 和 CSS3 特性。如果浏览器不支持某个特性，您可以使用 Modernizr 提供的条件语句来提供备用样式或 JavaScript 代码。
如何使用 Respond.js 和 Modernizr？
使用 Respond.js 非常简单，只需在您的 HTML 文件中包含以下代码：
---- ---------- --- ------- --------------------------------------------------------------------------------------
然后，在您的 CSS 文件中使用 CSS3 Media Queries 来设置响应式设计规则。例如，以下代码将使页面在分辨率小于 768 像素时采用不同的布局：
------ ----------- ------ - -- ------ --- ------- ---- ---- -- ----- -- ----- ---- -- -
现在，您可以使用这些规则来为不同的屏幕尺寸提供优化的体验。
要使用 Modernizr，请在您的 HTML 文件中包含以下代码：
---- --------- --- ------- ---------------------------------------------------------------------------------------
现在，您可以使用 Modernizr 的条件语句来检查浏览器是否支持特定的 HTML5 或 CSS3 特性。例如，以下代码将检查浏览器是否支持 flexbox 布局，并根据结果加载不同的 CSS 文件：
-- ------------------- - -- ---- --- ---- ---- ------- ------ - ---- - -- ---- ----------- --- ---- -
结论
响应式设计是现代 Web 设计的关键部分，可以确保网站在所有设备上都能正常显示。Respond.js 和 Modernizr 是两个强大的前端库，可以帮助解决与响应式设计相关的主要问题。通过使用这些库，您可以轻松地创建适合各种设备的网站，并为旧版浏览器提供备用方案。
示例代码
HTML 文件
--------- -----
------
------
--------- ---------- ---------------
---- ---------- ---
------- --------------------------------------------------------------------------------------
---- --------- ---
------- ---------------------------------------------------------------------------------------
---- --- ---
----- ---------------- ------------------
-------
------
--------
------ ---------- ------------
---------
-----
----
------ ----------------------
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------