随着移动设备的普及和屏幕尺寸的多样化，网页设计已经不再是只针对桌面端的设计，而是需要考虑到各种设备的适应性。响应式设计就是一种能够自动适应不同设备屏幕尺寸的设计方式。而在响应式设计中，@media 规则是实现适应性布局的重要工具。
什么是 @media 规则
@media 规则是 CSS 中的一种条件语句，可以根据不同的媒体类型和媒体查询条件来定义不同的 CSS 样式。其中，媒体类型包括 all（所有媒体类型）、screen（屏幕）、print（打印机）、speech（语音等非视觉媒体）等。而媒体查询条件则可以根据屏幕宽度、高度、方向、分辨率等多个参数来定义。
如何使用 @media 规则实现适应性布局
在响应式设计中，我们需要根据不同的屏幕尺寸来定义不同的布局。而使用 @media 规则可以很方便地实现这个目标。下面是一个简单的示例：
/* 在屏幕宽度小于 768px 时，将导航栏变为垂直布局 */
@media (max-width: 767px) {
.nav {
flex-direction: column;
}
}在上面的示例中，我们使用了一个媒体查询条件 (max-width: 767px)，表示当屏幕宽度小于等于 767px 时，就会应用这个 @media 规则所定义的样式。而在这个规则中，我们将导航栏的布局方式变为了垂直布局。
除了布局方式外，我们还可以根据不同的屏幕尺寸来定义字体大小、行高、间距、颜色等样式。下面是一个更复杂的示例：
-- -------------------- ---- -------
-- ------- ----- ------------ --
------ ----------- ------ -
---- -
--------------- -------
-
----- -
------ -----
-------------- -----
-
----- -
-------- -----
-
------------ -
-------- ------
-
------ -
---------- -----
------------ ----
-
-
-- --------- ----- ------------ --
------ ----------- ------ -
---- -
--------------- ----
-
----- -
------ -----
-------------- --
-
----- -
-------- -------------
-
------------ -
-------- -----
-
------ -
---------- -----
------------ ----
-
-在上面的示例中，我们定义了两个 @media 规则，分别对应屏幕宽度小于 768px 和大于等于 768px 时的样式。在小屏幕下，我们将导航栏变为垂直布局，并隐藏了菜单，同时调整了标题的字体大小和行高。而在大屏幕下，则将导航栏变为水平布局，并显示菜单，同时调整了标题的字体大小和行高。
总结
响应式设计已经成为了现代网页设计的标配，而 @media 规则则是实现适应性布局的重要工具。通过使用 @media 规则，我们可以根据不同的屏幕尺寸来定义不同的布局、字体大小、颜色等样式，从而实现网页在不同设备上的良好显示效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657b903ad2f5e1655d626b13