媒体查询是一种在 CSS 中使用的功能，用于根据设备的特性（如屏幕宽度、设备类型等）来应用不同的样式规则。通过媒体查询，我们可以实现响应式设计，使网站在不同设备上都能有良好的显示效果。
使用媒体查询
在 CSS 中使用媒体查询非常简单，只需在样式表中添加 @media 关键字，然后在括号中定义条件，最后在大括号中编写相应的样式规则。例如：
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-上面的示例代码表示，当屏幕宽度小于等于 768 像素时，body 元素的字体大小将变为 14 像素。
常用媒体查询条件
max-width：最大宽度min-width：最小宽度max-height：最大高度min-height：最小高度orientation：设备方向（横向或纵向）screen：屏幕设备print：打印设备only：排除其他设备not：排除指定设备
媒体查询示例
下面是一个简单的响应式设计示例，当屏幕宽度小于等于 768 像素时，标题文字颜色将变为红色：
------ ------ --- ----------- ------ -
-- -
------ ----
-
-通过媒体查询，我们可以轻松地创建适应不同设备的样式规则，提升用户体验。