随着移动互联网的快速发展，各种尺寸和类型的设备层出不穷。如何让网站在不同设备上都能展现最佳效果，成为了前端开发者面临的一大挑战。CSS媒体查询（Media Queries）正是解决这一问题的利器。本文将详细介绍CSS媒体查询的使用方法，帮助开发者轻松应对多屏适配挑战。
一、CSS媒体查询简介
CSS媒体查询允许开发者根据不同设备的特征（如屏幕宽度、分辨率等）来应用不同的CSS样式。这使得网站能够根据用户使用的设备自动调整布局和样式，从而提供更好的用户体验。
媒体查询的基本语法
媒体查询的基本语法结构如下：
@media 查询条件 {
CSS 样式规则;
}
查询条件可以是一个或多个媒体特性，通过逻辑运算符（and、not、only、or）组合起来。
常见的媒体特性
screen：屏幕print：打印设备speech：语音合成器等屏幕阅读器handheld：手持设备min-width：最小宽度max-width：最大宽度min-height：最小高度max-height：最大高度min-resolution：最小分辨率max-resolution：最大分辨率orientation：方向（如portrait、landscape）
二、媒体查询应用实例
以下是一个简单的示例，展示如何使用媒体查询来为不同屏幕宽度设置不同的样式：
/* 默认样式 */
body {
font-size: 16px;
color: #333;
}
/* 当屏幕宽度小于768px时 */
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
/* 当屏幕宽度在768px到992px之间时 */
@media (min-width: 768px) and (max-width: 992px) {
body {
font-size: 15px;
}
}
/* 当屏幕宽度大于992px时 */
@media (min-width: 992px) {
body {
font-size: 18px;
}
}
在这个例子中，我们为三种不同的屏幕宽度设置了不同的字体大小。
三、响应式布局容器
为了实现响应式布局，需要一个父级容器来配合子级元素的变化。以下是一个使用媒体查询实现响应式布局的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式布局容器</title>
<style>
/* 父级容器样式 */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* 子级元素样式 */
.content {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<!-- 内容 -->
</div>
</div>
</body>
</html>
在这个例子中，.container 是父级容器，.content 是子级元素。通过设置父级容器的 max-width 和子级元素的 max-width，可以实现响应式布局。
四、媒体查询的高级技巧
媒体查询组合
可以使用 and、not、only 和逗号来组合多个媒体查询，实现更复杂的逻辑。
and：连接多个媒体特性，表示“且”的关系。not：排除某种媒体类型或特性。only：仅适用于某种媒体类型（较少使用，主要用于兼容旧浏览器）。- 逗号：可以用来分隔多个媒体查询，使它们同时生效。
媒体查询断点
媒体查询断点是指媒体查询中定义的屏幕尺寸值。通过设置不同的断点，可以实现针对不同屏幕尺寸的样式调整。
/* 当屏幕宽度小于600px时 */
@media (max-width: 600px) {
/* 样式规则 */
}
/* 当屏幕宽度在600px到768px之间时 */
@media (min-width: 600px) and (max-width: 768px) {
/* 样式规则 */
}
/* 当屏幕宽度大于768px时 */
@media (min-width: 768px) {
/* 样式规则 */
}
媒体查询与rem单位
使用rem单位可以方便地实现响应式布局。rem单位相对于根元素（html）的字体大小，可以通过媒体查询调整根元素字体大小，从而实现响应式布局。
/* 默认样式 */
html {
font-size: 16px;
}
/* 当屏幕宽度小于768px时 */
@media (max-width: 768px) {
html {
font-size: 14px;
}
}
五、总结
CSS媒体查询是前端开发者应对多屏适配挑战的重要工具。通过合理使用媒体查询，可以实现针对不同设备的样式调整，提供更好的用户体验。本文介绍了CSS媒体查询的基本概念、语法、应用实例以及高级技巧，希望对开发者有所帮助。