媒介查询（Media Queries）是CSS3提供的一种功能，它允许开发者根据不同的设备特征（如屏幕尺寸、分辨率、设备类型等）来应用不同的样式规则。这种能力使得前端开发能够创建出适应不同设备的响应式网页布局。本文将详细讲解媒介查询的基础知识、语法、常用用法以及一些高级技巧。
媒介查询简介
媒介查询由一个或多个条件组成，每个条件指定一个或多个媒体特性。只有当条件满足时，相关的样式规则才会被应用。常见的媒体特性包括：
- 宽度（width）和高度（height）：表示视口的尺寸。
- 分辨率（resolution）：表示屏幕的像素密度。
- 设备类型（device-type）：如手机、平板、桌面等。
- 方向（orientation）：如横屏或竖屏。
媒介查询语法
媒介查询的基本语法如下：
@media (媒体特性1: 值1, 媒体特性2: 值2, ...) {
/* 当条件满足时应用的样式规则 */
}
例如，以下是一个简单的媒介查询，当屏幕宽度小于600像素时应用样式：
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
常用媒介查询用法
响应式布局
响应式布局的核心在于使用媒介查询来调整布局的宽度、间距、字体大小等属性。以下是一些常见的响应式布局技巧：
- 使用百分比宽度：让容器宽度根据视口宽度动态调整。
- 利用flexbox或grid布局：这些布局模式可以自动适应不同屏幕尺寸。
.container {
width: 100%;
display: flex;
}
@media (min-width: 600px) {
.container {
flex-direction: row;
}
}
媒体查询与字体大小
调整字体大小以适应不同设备尺寸是响应式设计的关键部分。以下是一个例子，根据屏幕宽度调整字体大小：
body {
font-size: 16px;
}
@media (min-width: 768px) {
body {
font-size: 18px;
}
}
@media (min-width: 1024px) {
body {
font-size: 20px;
}
}
媒体查询与背景图像
背景图像也可以根据不同的屏幕尺寸和分辨率进行调整：
body {
background-image: url('default-background.jpg');
background-size: cover;
}
@media (min-width: 768px) {
body {
background-image: url('large-background.jpg');
}
}
高级技巧
媒介查询嵌套
在某些情况下，可以将媒介查询嵌套在其他媒介查询内部，以便更精细地控制样式：
@media (min-width: 768px) {
.container {
display: flex;
}
@media (min-width: 1024px) {
.container {
justify-content: space-between;
}
}
}
媒介查询的优先级
如果多个媒介查询可能同时满足，CSS会根据优先级来应用样式。更具体的媒介查询（如宽度范围更窄的查询）具有更高的优先级。
总结
媒介查询是CSS布局的强大工具，它使得开发者能够创建出灵活、响应式的网页设计。通过合理运用媒介查询，可以确保网页在不同设备上都能提供良好的用户体验。