CSS媒体查询：响应式设计的核心工具
在移动互联网普及的当下，用户会通过手机、平板、电脑等不同尺寸的设备访问网页。为了让网页在不同设备上都能有良好的展示效果，响应式设计成为了前端开发的基础要求，而CSS中的@media媒体查询正是实现响应式设计的核心工具。
什么是媒体查询
媒体查询是CSS3引入的功能，它允许开发者根据设备的特性（比如屏幕宽度、分辨率、设备方向等）来应用不同的CSS样式规则。简单来说，就是通过检测当前设备的相关属性，判断是否满足预设的条件，如果满足条件就执行对应的样式代码，不满足则忽略。
媒体查询最常见的应用场景就是根据屏幕宽度调整页面布局：比如电脑端屏幕较宽，可以展示多列内容；手机端屏幕较窄，就把内容切换为单列排列，避免出现横向滚动条或者内容被挤压的问题。
媒体查询的基本语法
媒体查询有两种常用的使用方式，一种是在CSS样式表中直接编写，另一种是在HTML的<link>标签中通过media属性指定。
1. CSS样式表中直接使用@media
这是最常用的方式，基础语法结构如下：
/* 基础样式，所有设备都会加载 */
.container {
width: 100%;
padding: 20px;
}
/* 媒体查询：当屏幕宽度小于等于768px时（通常是手机设备），应用以下样式 */
@media screen and (max-width: 768px) {
.container {
padding: 10px; /* 减小内边距，适配小屏幕 */
}
.sidebar {
display: none; /* 小屏幕下隐藏侧边栏 */
}
}
/* 媒体查询：当屏幕宽度在769px到1024px之间时（通常是平板设备），应用以下样式 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
.container {
width: 90%;
margin: 0 auto; /* 居中显示，两侧留白 */
}
.sidebar {
width: 25%; /* 侧边栏占25%宽度 */
}
}
/* 媒体查询：当屏幕宽度大于1024px时（通常是电脑设备），应用以下样式 */
@media screen and (min-width: 1025px) {
.container {
width: 1200px;
margin: 0 auto;
}
.sidebar {
width: 20%;
}
}上面的代码中，screen表示媒体类型是屏幕设备，max-width和min-width是检测的条件，括号里的样式只有在条件满足时才会生效。如果没有指定媒体类型，默认就是all，会匹配所有设备。
2. 在link标签中使用媒体查询
这种方式可以根据条件加载不同的CSS文件，适合样式差异较大的场景，语法示例如下：
<!-- 基础样式，所有设备都会加载 --> <link rel="stylesheet" href="base.css"> <!-- 屏幕宽度小于等于768px时，加载手机端样式 --> <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)"> <!-- 屏幕宽度大于768px时，加载PC端样式 --> <link rel="stylesheet" href="pc.css" media="screen and (min-width: 769px)">
常用媒体查询条件
除了最常用的width（宽度）相关条件，媒体查询还支持很多其他设备特性的检测，以下是一些常用的条件：
- width/min-width/max-width：检测视口（viewport）的宽度，单位通常是px
- height/min-height/max-height：检测视口的高度
- orientation：检测设备方向，值为portrait（竖屏）或landscape（横屏）
- resolution：检测屏幕分辨率，比如2dppx表示2倍屏（Retina屏）
- prefers-color-scheme：检测用户系统的主题偏好，值为light（浅色主题）或dark（深色主题）
下面是一个检测设备方向和系统主题的示例：
/* 横屏时调整布局 */
@media screen and (orientation: landscape) {
.banner {
height: 200px; /* 横屏时banner高度调整为200px */
}
}
/* 用户系统使用深色主题时，应用深色样式 */
@media (prefers-color-scheme: dark) {
body {
background-color: #1a1a1a;
color: #e5e5e5;
}
a {
color: #4da3ff;
}
}媒体查询的注意事项
在使用媒体查询做响应式设计时，有几个需要注意的点：
- 一定要在HTML头部设置viewport元标签，否则手机端会默认以980px的宽度渲染页面，媒体查询的宽度条件会失效，正确的设置是：<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 媒体查询的区间不要出现重叠或者间隙，比如设置max-width: 768px和min-width: 769px就可以覆盖所有宽度场景，避免出现某个宽度区间没有匹配样式的情况
- 移动端优先是现在更推荐的开发思路：先写小屏幕的基础样式，再用min-width的媒体查询逐步适配大屏幕，这样代码更简洁，也符合渐进增强的设计理念
只要合理运用媒体查询，就可以用一套代码适配所有主流设备，大幅提升开发效率，也能给用户带来更统一的访问体验。