响应式 Web 设计 - 媒体查询

媒体查询是一种在 CSS 中使用的功能，用于根据设备的特性（如屏幕宽度、设备类型等）来应用不同的样式规则。通过媒体查询，我们可以实现响应式设计，使网站在不同设备上都能有良好的显示效果。

使用媒体查询

在 CSS 中使用媒体查询非常简单，只需在样式表中添加 @media 关键字，然后在括号中定义条件，最后在大括号中编写相应的样式规则。例如：

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

上面的示例代码表示，当屏幕宽度小于等于 768 像素时，body 元素的字体大小将变为 14 像素。

常用媒体查询条件

• max-width：最大宽度
• min-width：最小宽度
• max-height：最大高度
• min-height：最小高度
• orientation：设备方向（横向或纵向）
• screen：屏幕设备
• print：打印设备
• only：排除其他设备
• not：排除指定设备

媒体查询示例

下面是一个简单的响应式设计示例，当屏幕宽度小于等于 768 像素时，标题文字颜色将变为红色：

@media screen and (max-width: 768px) {
    h1 {
        color: red;
    }
}

通过媒体查询，我们可以轻松地创建适应不同设备的样式规则，提升用户体验。