随着移动设备的普及和屏幕尺寸的多样化，网页设计已经不再是只针对桌面端的设计，而是需要考虑到各种设备的适应性。响应式设计就是一种能够自动适应不同设备屏幕尺寸的设计方式。而在响应式设计中，@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 规则所定义的样式。而在这个规则中，我们将导航栏的布局方式变为了垂直布局。
除了布局方式外，我们还可以根据不同的屏幕尺寸来定义字体大小、行高、间距、颜色等样式。下面是一个更复杂的示例：
// javascriptcn.com 代码示例
/* 在屏幕宽度小于 768px 时，将导航栏变为垂直布局 */
@media (max-width: 767px) {
.nav {
flex-direction: column;
}
.logo {
width: 100%;
margin-bottom: 20px;
}
.menu {
display: none;
}
.mobile-menu {
display: block;
}
.title {
font-size: 24px;
line-height: 1.5;
}
}
/* 在屏幕宽度大于等于 768px 时，将导航栏变为水平布局 */
@media (min-width: 768px) {
.nav {
flex-direction: row;
}
.logo {
width: auto;
margin-bottom: 0;
}
.menu {
display: inline-block;
}
.mobile-menu {
display: none;
}
.title {
font-size: 32px;
line-height: 1.2;
}
}在上面的示例中，我们定义了两个 @media 规则，分别对应屏幕宽度小于 768px 和大于等于 768px 时的样式。在小屏幕下，我们将导航栏变为垂直布局，并隐藏了菜单，同时调整了标题的字体大小和行高。而在大屏幕下，则将导航栏变为水平布局，并显示菜单，同时调整了标题的字体大小和行高。
总结
响应式设计已经成为了现代网页设计的标配，而 @media 规则则是实现适应性布局的重要工具。通过使用 @media 规则，我们可以根据不同的屏幕尺寸来定义不同的布局、字体大小、颜色等样式，从而实现网页在不同设备上的良好显示效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657b903ad2f5e1655d626b13