什么是响应式设计？
响应式设计（Responsive Design），顾名思义，就是能够针对不同的设备尺寸和屏幕大小进行自适应调整的页面设计。也就是说，不同的设备访问同一个页面，会针对不同的屏幕大小和设备类型，自动调整页面布局和样式，以达到更好的用户体验。
方案之一：通过 media query 实现响应式设计
在前端开发中，我们可以通过 CSS3 中的 media query，针对不同的屏幕大小和设备类型，调整页面样式和布局。
media query 根据不同的媒体类型、设备宽度等条件进行样式筛选和转换。以下是一个基本的 media query 示例：
@media screen and (max-width: 480px) {
/* 在小于等于 480px 宽度的屏幕上，应用以下样式 */
body {
background-color: #8e8e8e;
}
}在上述示例中，我们定义了一条 CSS 规则，表示只有当页面运行在屏幕宽度小于等于 480 像素的设备上时，才会应用 background-color: #8e8e8e; 样式。
media query 是以 CSS 来使用和实现的，我们可以根据具体的需求自定义不同的规则和设备尺寸，实现更多的响应式设计效果。
下面我们通过具体案例来学习 media query 的实现方法。
案例演示：基础响应式设计
我们以一个简单的图片展示网页为例，展示如何通过 media query 实现基础的响应式设计。
首先，我们需要在 HTML 页面头部引入 media query 样式表。
<head> <meta charset="UTF-8"> <title>基础响应式设计示例</title> <link rel="stylesheet" type="text/css" href="style.css"> </head>
接着，我们在 style.css 样式表中定义 media query 规则。
-- -------------------- ---- -------
-- ------- --
---- -
------- --
-------- --
-
-- ---------- --
---------- -
-------- -----
---------- -----
------ -----
---------- -------
------- - -----
-
-------- -
------ ----
-------------- -----
-------- - -----
-
-------- --- -
------ -----
------- -----
-
-- ------------ --
------ ------ --- ----------- ------ -
---------- -
---------- ------
-
-------- -
------ -------
-
-
------ ------ --- ----------- ------ -
---------- -
---------- ------
-
-------- -
------ ----
-
-在上面的示例中，我们定义了一个 .container 容器，以及每个 .img-box 图片容器的样式。当页面运行在屏幕宽度小于等于 768 像素和小于等于 480 像素的设备上时，会应用对应的 media query 样式。
最后，我们在 HTML 页面中调用图片和容器，即可看到不同屏幕尺寸下的页面样式变化。
-- -------------------- ---- -------
------
---- ------------------
---- ----------------
---- -------------------------------------------- -------
------
---- ----------------
---- -------------------------------------------- -------
------
---- ----------------
---- -------------------------------------------- -------
------
---- ----------------
---- -------------------------------------------- -------
------
------
-------如上述案例所示，我们通过 media query 实现了针对不同屏幕尺寸的响应式设计，使页面在不同设备上都可以良好的展示和使用。
总结
通过 media query，可以方便地实现网页的响应式设计，让网页在不同屏幕尺寸和设备上都具有更好的用户体验。
需要注意的是，在实现响应式设计时，需要针对不同的设备尺寸和类型制定不同的规则和设备宽度值，才能实现最佳效果。
除了 media query 之外，还有很多响应式设计的解决方案，需要根据具体需求和场景做出选择。
希望本篇文章能够对你有所帮助，能够更好地应用 media query 实现网页响应式设计。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a1437948841e9894d875b5