在当前互联网时代，越来越多的用户使用不同种类的设备来访问网站，如手机、平板电脑、笔记本电脑等，这给网站的设计师和开发者带来了很大的挑战。如何使网站的设计和开发能够适应不同的设备和屏幕大小，成为了一个重要的问题。解决这个问题的方法之一就是使用响应式设计（Responsive Design）。
响应式设计，是一种将网站的设计和开发，根据不同的设备和屏幕大小而产生不同布局的技术。其中，CSS3 媒体查询是实现响应式设计的关键。CSS3 媒体查询可以根据不同设备的屏幕宽度、高度等属性，应用不同的 CSS 样式，从而实现自适应布局。
媒体查询的语法
CSS3 媒体查询是通过 @media 规则来实现的。其语法如下：
@media mediatype and (expression) {
// CSS样式
}其中，mediatype 指定一种设备的类型，如 screen、print、all 等；expression 通过使用宽度、高度等属性条件来应用不同的 CSS 样式。
示例代码
为了更好地理解媒体查询的应用，在这里我们提供一个实例代码，实现了响应式设计。你可以在不同设备上查看展示效果。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -----------------
---------------------------------
-------
-- ---- --
---------- -
------ ------
------- - -----
-
---- -
------ ------
------- ------
----------------- -----
------- ----- -----
-
-- --------------------------- --
------ ------ --- ----------- ------ -
---------- -
------ -----
-
---- -
------ ------
------- ------
-
-
-- -------------------------------- --
------ ------ --- ----------- ------ --- ----------- ------ -
---------- -
------ ----
-
---- -
------ ------
------- ------
-
-
--------
-------
------
---- ---------------
---- ---------------
------
-------
-------在这个示例代码中，我们定义了一个 id 为 container 的 div 元素作为容器，又定义了一个 id 为 box 的 div 元素作为盒子。我们使用默认的样式使得 container 的宽度为 960px，box 的宽度和高度均为 300px。
然后，我们使用了两个媒体查询规则，当屏幕的宽度小于等于 600px 时，使用第一个规则，其将 container 的宽度设置为 100%，而 box 的宽度和高度都设置为 200px。当屏幕的宽度在 601px 和 959px 之间时，使用第二个规则，其将 container 的宽度设置为 80%，而 box 的宽度和高度都设置为 250px。
这样，当你改变浏览器窗口大小，你就可以看到 box 的大小随之变化了。
总结
CSS3 媒体查询是一种实现响应式设计的关键技术，可以帮助网站设计师和开发者处理适应不同设备和屏幕大小的问题。在本文中，我们简单介绍了媒体查询的语法，并通过一个示例代码进行了演示。
对于响应式设计，我们还需要掌握和应用一些其他的 CSS 技术，如弹性盒模型（Flexbox）、网格布局（Grid Layout）等。因此，在今后的学习和实践中，我们需要不断提升自己的 CSS 技能，才能更好地应对不断变化的互联网设计和开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a2295748841e9894e70fc6