在当今移动设备普及的时代，制作响应式设计是前端开发人员必备的技能之一。CSS Media Query 是实现响应式设计的重要工具之一，本文将详细介绍如何使用 CSS Media Query 制作响应式设计。
什么是 CSS Media Query
CSS Media Query 是 CSS3 的一个模块，它允许开发人员根据设备的特性（如屏幕大小、分辨率、方向等）来应用不同的 CSS 样式。通过使用 CSS Media Query，我们可以为不同的设备和屏幕尺寸提供不同的样式，从而实现响应式设计。
如何使用 CSS Media Query
使用 CSS Media Query 制作响应式设计需要遵循以下步骤：
1. 编写基本样式
首先，我们需要编写基本样式，即在没有使用 CSS Media Query 的情况下，网页的默认样式。这些样式将应用于所有设备和屏幕尺寸。
-- -------------------- ---- ------- ---- - ---------- ----- ------------ ---- - ---------- - ------ ---- ------- - ----- -
2. 定义媒体查询
接下来，我们需要定义媒体查询，即根据不同的设备特性应用不同的 CSS 样式。媒体查询通常包含以下三个部分：
- 媒体类型：指定要应用样式的设备类型，如屏幕、打印机等。
- 媒体特性：指定要应用样式的设备特性，如屏幕宽度、屏幕方向等。
- 样式规则：指定要应用的 CSS 样式。
@media screen and (max-width: 768px) {
.container {
width: 90%;
}
}上面的代码表示，当屏幕宽度小于等于 768px 时，.container 元素的宽度将变为 90%。
3. 编写响应式样式
最后，我们需要编写响应式样式，即针对不同的设备特性应用不同的 CSS 样式。这些样式将覆盖基本样式，从而实现响应式设计。
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}上面的代码表示，当屏幕宽度小于等于 768px 时，body 元素的字体大小将变为 14px。
示例代码
下面是一个完整的示例代码，演示如何使用 CSS Media Query 制作响应式设计：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------
-------
---- -
---------- -----
------------ ----
-
---------- -
------ ----
------- - -----
-
------ ------ --- ----------- ------ -
---------- -
------ ----
-
---- -
---------- -----
-
-
--------
-------
------
---- ------------------
----------------
--------------------- --- ----- ----- ------------
------
-------
-------总结
本文介绍了如何使用 CSS Media Query 制作响应式设计。通过使用 CSS Media Query，我们可以根据设备的特性应用不同的 CSS 样式，从而实现响应式设计。遵循本文中的步骤，您可以轻松地制作响应式设计，并提高网站的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6507f9e795b1f8cacd323f97