@media 媒体查询是CSS中用于根据不同的媒体类型或特定的设备条件应用样式的一种方式。通过媒体查询，你可以使网页在不同的屏幕大小、分辨率或设备类型下呈现不同的样式。

基础语法

@media media-type and (media-feature) {/* 样式规则 */
}

• media-type：媒体类型，例如 screen（屏幕）、print（打印）、speech（语音）等。常用的是 screen。
• media-feature：媒体特性，用于描述设备的属性，例如 width（宽度）、height（高度）、max-width（最大宽度）、orientation（方向）等。

例子

/* 根据屏幕宽度应用不同的样式 */
@media screen and (max-width: 600px) {body {background-color: lightblue;}
}/* 根据设备方向应用不同的样式 */
@media screen and (orientation: landscape) {body {font-size: 18px;}
}/* 组合多个条件 */
@media screen and (min-width: 600px) and (max-width: 900px) {body {font-family: 'Arial', sans-serif;}
}

响应式设计的常见应用：

1.调整字体大小：

@media screen and (max-width: 768px) {body {font-size: 14px;}
}

2.隐藏或显示特定元素：

@media screen and (max-width: 600px) {.sidebar {display: none;}
}

3.调整布局：

@media screen and (max-width: 600px) {.container {flex-direction: column;}
}

4.优化打印样式：

@media print {body {color: black;}
}