首页 › HTML/CSS › 媒体查询完全指南

媒体查询完全指南

小飞兽 HTML/CSS 384 次阅读 2026-04-24

媒体查询完全指南

Introduction

媒体查询（Media Queries）是CSS3中最强大的特性之一，它允许我们根据设备的各种特性（如屏幕宽度、高度、分辨率、颜色能力等）来有条件地应用不同的样式规则。通过媒体查询，我们可以构建真正响应式的网页，让同一套HTML在手机、平板、桌面等不同设备上呈现最佳的视觉效果。

媒体查询的出现彻底改变了前端开发的思路。在移动互联时代，用户使用各种尺寸的设备访问网页，媒体查询成为实现"一次编写，到处适配"的响应式设计（RWD, Responsive Web Design）的核心技术。无论是导航菜单的折叠、图片的缩放，还是布局列数的调整，都离不开媒体查询的精确控制。

本文将系统性地介绍CSS媒体查询的完整语法、实战技巧、常见问题以及最佳实践，帮助你全面掌握这一前端开发必备技能。

基础语法

基本语法结构

媒体查询由一个可选的媒体类型和零个或多个用括号包裹的媒体特性表达式组成。基本语法如下：

@media 媒体类型 and (媒体特性) {
    /* CSS规则 */
}

媒体类型（Media Types）定义了一类设备，常见的有：

  • <code>all</code> — 适用于所有设备（默认值）

  • <code>screen</code> — 用于屏幕设备（电脑、手机、平板）

  • <code>print</code> — 用于打印预览和打印输出

  • <code>speech</code> — 用于语音合成器

媒体特性（Media Features）描述了设备的特征，常见特性包括：

  • <code>width</code> / <code>height</code> — 视口宽度或高度

  • <code>min-width</code> / <code>min-height</code> — 最小视口尺寸

  • <code>max-width</code> / <code>max-height</code> — 最大视口尺寸

  • <code>orientation</code> — 设备方向（portrait 横屏 / landscape 竖屏）

  • <code>resolution</code> — 设备像素密度

  • <code>hover</code> — 设备是否支持悬停

  • <code>pointer</code> — 指点设备类型（fine粗糙 / coarse精细 / none无）

在HTML中引入

媒体查询可以在CSS文件中声明，也可以通过 link 标签的 media 属性来指定：

<!-- 条件性加载样式表 -->
<link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">
<link rel="stylesheet" href="tablet.css" media="(min-width: 769px) and (max-width: 1024px)">
<link rel="stylesheet" href="desktop.css" media="(min-width: 1025px)">

第二种方式（直接在link标签写media属性）的性能更好，因为浏览器不会下载不匹配媒体条件的样式表文件。

移动优先 vs 桌面优先

有两种编写响应式CSS的策略：

移动优先（Mobile First） — 先编写移动端样式，再用 min-width 逐步为更大屏幕添加样式：

/* 基础样式（移动端） */
.container { width: 100%; }

/* 平板及以上 */
@media (min-width: 768px) {
    .container { width: 750px; }
}

/* 桌面及以上 */
@media (min-width: 1024px) {
    .container { width: 970px; }
}

桌面优先（Desktop First） — 先编写桌面端样式，再用 max-width 逐步为更小屏幕精简样式：

/* 基础样式（桌面端） */
.container { width: 1200px; }

/* 平板及以下 */
@media (max-width: 1024px) {
    .container { width: 970px; }
}

/* 移动端及以下 */
@media (max-width: 768px) {
    .container { width: 100%; }
}

业界普遍推荐移动优先策略，因为它更符合渐进增强（Progressive Enhancement）的理念，产生的CSS通常也更轻量。

代码示例

示例一：响应式网格布局

/* 基础样式 */
.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
}

/* 平板：一行2列 */
@media (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 桌面：一行3列 */
@media (min-width: 1024px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 大屏：一行4列 */
@media (min-width: 1440px) {
    .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 20px;
}

示例二：响应式导航栏

/* 移动端：汉堡菜单 */
.navbar {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.nav-links {
    display: none;
    flex-direction: column;
    gap: 10px;
}

.nav-links.active {
    display: flex;
}

/* 桌面：水平导航 */
@media (min-width: 768px) {
    .navbar {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .nav-links {
        display: flex;
        flex-direction: row;
        gap: 30px;
    }

    .menu-toggle {
        display: none;
    }
}

示例三：响应式图片

.responsive-img {
    max-width: 100%;
    height: auto;
}

/* 高分辨率屏幕（Retina）使用2x图片 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo {
        background-image: url('logo@2x.png');
        background-size: contain;
    }
}

示例四：深色模式适配

/* 默认浅色主题 */
body {
    background-color: #ffffff;
    color: #333333;
}

/* 用户偏好深色模式 */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
        color: #e0e0e0;
    }
}

示例五：JavaScript中检测媒体查询

// 检测当前是否匹配某个媒体查询
const mediaQuery = window.matchMedia('(max-width: 768px)');

function handleMobile(e) {
    if (e.matches) {
        console.log('当前为移动端视图');
        document.body.classList.add('mobile');
        document.body.classList.remove('desktop');
    } else {
        console.log('当前为桌面端视图');
        document.body.classList.add('desktop');
        document.body.classList.remove('mobile');
    }
}

// 立即执行一次
handleMobile(mediaQuery);

// 监听变化（推荐写法，兼容新旧浏览器）
if (mediaQuery.addEventListener) {
    mediaQuery.addEventListener('change', handleMobile);
} else {
    // 旧版Safari浏览器兼容
    mediaQuery.addListener(handleMobile);
}

运行效果

在浏览器DevTools中体验

现代浏览器（如Chrome、Firefox、Edge）都内置了响应式设计模式，可以非常方便地测试媒体查询效果：

1. 打开浏览器开发者工具（F12）
2. 按 Ctrl + Shift + M（Windows/Linux）或 Cmd + Option + M（Mac）进入响应式设计模式
3. 可以从预设设备列表中选择（如iPhone、iPad、Pixel等），也可以手动拖拽调整视口尺寸
4. 观察页面布局在不同断点处的变化

视觉效果变化

以示例一的网格布局为例：

  • <strong>宽度 &lt; 768px</strong>：卡片单列垂直堆叠，全宽显示，适合单手操作的移动设备

  • <strong>宽度 768px - 1023px</strong>：卡片两列排列，充分利用平板横屏空间

  • <strong>宽度 1024px - 1439px</strong>：卡片三列排列，桌面端标准布局

  • <strong>宽度 ≥ 1440px</strong>：卡片四列排列，充分利用大屏显示器空间

对于深色模式适配，当用户在操作系统中开启了深色模式时，网站背景会自动从白色切换为深灰色，文字颜色从深色切换为浅色，提供更舒适的阅读体验。

常见问题

Q1：移动端页面缩放问题

问题描述：在手机上打开网页时，页面被缩放得很小，内容密密麻麻看不清。

原因：缺少或不正确的viewport meta标签导致浏览器按默认980px视口渲染，而手机屏幕实际宽度只有375px左右。

解决方案：始终在HTML的 <head> 中加入标准viewport设置：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

注意：不要在viewport content中添加 user-scalable=no，这会禁止用户缩放页面，影响可访问性。

Q2：媒体查询失效

问题描述：媒体查询中的样式没有生效。

排查步骤：
1. 确认CSS文件是否正确加载（检查Network面板）
2. 确认选择器优先级是否足够高（可能被其他样式覆盖）
3. 检查媒体查询语法是否有拼写错误，尤其是 and 前后必须有空格
4. 确认媒体特性的值是否正确——max-width:768px 和 max-width: 768px 在某些旧浏览器中行为不同

Q3：Retina屏幕图片模糊

问题描述：在高清屏幕上图片看起来模糊发虚。

原因：普通图片在Retina屏幕（devicePixelRatio≥2）上被放大显示，导致像素化。

解决方案：

/* 方案1：CSS背景图 */
.logo {
    background-image: url('logo@1x.png');
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo {
        background-image: url('logo@2x.png');
    }
}

/* 方案2：HTML5 srcset属性 */
<img src="photo.jpg" srcset="photo@2x.jpg 2x" alt="描述">

Q4：em和px混用导致断点不准确

问题描述：使用em单位的媒体查询，断点与预期不符。

原因：em相对于当前元素的字体大小，而在媒体查询中em相对于根元素（html）的字体大小。如果用户调整了浏览器默认字体大小，em 单位的断点会随之变化。

建议：如果想要精确控制断点位置，统一使用 px 单位；如果想实现文字缩放友好型断点，使用 em 并注意其相对于根字号的计算。

Q5：打印样式不生效

问题描述：希望打印时隐藏导航、显示链接URL等，但打印效果与屏幕一致。

解决方案：

@media print {
    .navbar, .sidebar, .advertisement {
        display: none !important;
    }

    a[href]::after {
        content: " (" attr(href) ")";
    }

    body {
        font-size: 12pt;
        color: #000;
    }
}

记得在HTML的 <head> 中添加打印样式表的引用：

<link rel="stylesheet" href="print.css" media="print">

延伸阅读

1. MDN官方文档 — CSS媒体查询 — 最权威、最全面的参考资料，包含所有媒体类型和媒体特性的完整列表及详细说明。

2. Google Web Fundamentals — 响应式设计 — Responsive Web Design Basics — Google官方教程，深入讲解了移动优先策略、触摸目标大小、视口配置等实战要点。

3. CSS Tricks — Media Queries完整指南 — CSS Tricks Media Queries — 汇集了大量实战中常用的媒体查询技巧和常见模式。

4. Can I Use — 浏览器兼容性查询 — Can I Use Media Queries? — 随时查询各浏览器对媒体查询特性支持情况的实用工具。

5. 响应式设计模式 — Responsive Design Patterns — 介绍了常见的响应式布局模式，包括Fluid Grid、Column Drop、Layout Shifter等。

掌握媒体查询是现代前端开发的必备技能。建议在实际项目中多加练习，从简单的单断点适配开始，逐步掌握多断点、复杂媒体特性的综合运用，最终形成自己的响应式设计最佳实践。

相关教程

Next.js 服务端组件与客户端组件选择 👁 488 CSS 动画与过渡效果 👁 517 浮动与清除浮动完全指南 👁 476 CSS 盒模型深度解析 👁 455 CSS 变量（自定义属性）使用指南 👁 436 CSS 定位属性详解 👁 421