CSS 响应式设计之媒体查询技术

CSS 媒体查询（Media Queries）是一种根据不同设备的特性（如屏幕宽度、分辨率、方向等）来应用不同的 CSS 样式的技术。它通常用于响应式设计，帮助网页在不同设备和屏幕尺寸下良好地展示。

基本语法

@media (条件) {/* 样式规则 */
}

• @media 关键字表示媒体查询。
• (条件) 是测试设备特性的条件表达式，例如屏幕宽度、分辨率等。
• {} 内包含满足条件时应用的样式规则。

常见的媒体查询条件

1. 屏幕宽度 (min-width 和 max-width)：
   • min-width: 指定屏幕最小宽度，适用于宽度大于等于指定值的设备。
   • max-width: 指定屏幕最大宽度，适用于宽度小于等于指定值的设备。

/* 当屏幕宽度大于等于768px时应用 */
@media (min-width: 768px) {body {background-color: lightblue;}
}/* 当屏幕宽度小于等于600px时应用 */
@media (max-width: 600px) {body {background-color: lightgreen;}
}

2. 屏幕方向 (orientation)：
   • portrait: 垂直方向（高宽比大于1）。
   • landscape: 横向方向（宽高比大于1）。

/* 适用于竖屏设备 */
@media (orientation: portrait) {body {font-size: 14px;}
}/* 适用于横屏设备 */
@media (orientation: landscape) {body {font-size: 16px;}
}

3. 设备分辨率 (resolution)：
   • 用于指定屏幕的分辨率（如：DPI 或像素密度）。

/* 适用于高分辨率设备，如 Retina 显示屏 */
@media (min-resolution: 2dppx) {img {width: 200%;}
}

常见媒体查询示例

响应式布局

在响应式设计中，媒体查询帮助调整布局和样式，使得网站在不同的设备上都能有良好的展示效果。

/* 基本样式 */
body {font-family: Arial, sans-serif;
}/* 大屏幕设备 */
@media (min-width: 1200px) {body {font-size: 18px;}
}/* 中等屏幕设备（例如平板电脑） */
@media (min-width: 768px) and (max-width: 1199px) {body {font-size: 16px;}
}/* 小屏幕设备（例如手机） */
@media (max-width: 767px) {body {font-size: 14px;}
}

图片大小

根据设备的分辨率来选择不同的图片资源。

/* 默认图片 */
img {width: 100%;height: auto;
}/* 高分辨率屏幕（如 Retina 显示屏） */
@media (min-resolution: 2dppx) {img {content: url('high-res-image.jpg');}
}

组合条件

可以使用逻辑运算符 and, not, 和 only 来组合多个条件。

• and：同时满足多个条件。
• not：排除某个条件。
• only：应用特定条件，通常用于避免某些旧版浏览器解析媒体查询。

/* 屏幕宽度大于768px 且方向为横屏 */
@media (min-width: 768px) and (orientation: landscape) {body {background-color: lightyellow;}
}/* 不适用于小于768px的设备 */
@media not all and (max-width: 767px) {body {font-size: 16px;}
}

媒体查询的优先级

1. 外部 CSS 中的媒体查询优先级高于全局样式。
2. 在同一文件中，后定义的媒体查询覆盖前面定义的样式。

媒体查询是响应式设计的核心技术之一，通过合理的组合和设计，可以使网站适应各种设备，提升用户体验。