CSS 媒体查询详解：一文掌握响应式设计的核心技术

CSS 媒体查询详解：一文掌握响应式设计的核心技术 🚀

媒体查询是 CSS3 引入的核心特性，也是响应式设计（Responsive Design）的基石。本文将全面讲解媒体查询的各种用法，让你的网页能够优雅适配各种设备！

📋 什么是媒体查询？

媒体查询（Media Queries）允许我们根据设备的特性（如屏幕宽度、高度、分辨率等）来应用不同的 CSS 样式规则。

简单来说："如果设备满足某个条件，就使用这套样式"

🔰 基础语法

@media 规则

css 复制代码

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

实用示例：

css 复制代码

/* 当屏幕宽度 ≥ 768px 时生效 */
@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

媒体类型一览

类型	说明
`screen`	📱 电脑、平板、手机等屏幕设备
`print`	🖨️ 打印机和打印预览
`speech`	🔊 屏幕阅读器等语音合成设备
`all`	🌐 所有设备（默认）

css 复制代码

/* 仅在屏幕上生效 */
@media screen {
    body { font-family: 'Segoe UI', sans-serif; }
}

/* 仅在打印时隐藏元素 */
@media print {
    .no-print { display: none; }
}

🎯 常用媒体特征

视口宽度和高度（最常用！）

css 复制代码

/* 最小宽度 */
@media (min-width: 320px) { }

/* 最大宽度 */
@media (max-width: 768px) { }

/* 宽度范围（区间查询） */
@media (min-width: 768px) and (max-width: 1024px) { }

/* 视口高度 */
@media (min-height: 600px) { }

屏幕方向

css 复制代码

/* 竖屏（手机竖着拿） */
@media (orientation: portrait) { }

/* 横屏（手机横着拿） */
@media (orientation: landscape) { }

高清屏幕（Retina）

css 复制代码

/* 设备像素比 ≥ 2 或 分辨率 ≥ 192dpi */
@media (-webkit-min-device-pixel-ratio: 2), 
       (min-resolution: 192dpi) {
    .logo {
        background-image: url('logo@2x.png');
    }
}

交互特性（超实用！）

css 复制代码

/* 支持悬停（鼠标设备） */
@media (hover: hover) {
    .button:hover {
        background: #ff6600;
    }
}

/* 不支持悬停（触摸屏） */
@media (hover: none) {
    .dropdown {
        /* 触摸设备可能需要点击展开 */
    }
}

/* 精细指针（鼠标） */
@media (pointer: fine) {
    .checkbox { width: 16px; }
}

/* 粗糙指针（触摸屏） */
@media (pointer: coarse) {
    .checkbox { width: 32px; /* 触摸目标要更大 */ }
}

📱 断点设计策略

移动优先 vs 桌面优先

✅ 推荐：移动优先（Mobile First）

css 复制代码

/* 第一层：基础样式（移动端优先） */
.container {
    width: 100%;
    padding: 16px;
}

/* 第二层：平板 */
@media (min-width: 768px) {
    .container {
        width: 720px;
        padding: 24px;
    }
}

/* 第三层：桌面 */
@media (min-width: 1024px) {
    .container {
        width: 960px;
        padding: 32px;
    }
}

/* 第四层：大屏 */
@media (min-width: 1280px) {
    .container {
        width: 1200px;
    }
}

❌ 不推荐：桌面优先（Desktop First）

css 复制代码

/* 从大屏幕开始，逐步缩小 */
.container {
    width: 1200px;
}

@media (max-width: 1024px) {
    .container { width: 960px; }
}

@media (max-width: 768px) {
    .container { width: 100%; }
}

常用断点参考表

断点	设备类型	典型尺寸
`< 576px`	📱 手机竖屏	320px - 375px
`576px - 768px`	📱 手机横屏/小平板	576px - 667px
`768px - 992px`	📲 平板	768px - 1024px
`992px - 1200px`	💻 小桌面	992px - 1366px
`> 1200px`	🖥️ 大桌面	1920px+

💡 高级技巧

逻辑运算符

css 复制代码

/* AND：同时满足多个条件 */
@media (min-width: 768px) and (orientation: landscape) {
    .sidebar { display: flex; }
}

/* NOT：取反 */
@media not (max-width: 768px) {
    .mobile-only { display: none; }
}

/* ONLY：仅匹配指定媒体类型（兼容性保护） */
@media only screen and (min-width: 768px) {
    .responsive-nav { display: block; }
}

/* 逗号：或（任一条件满足即可） */
@media (min-width: 768px), (orientation: landscape) {
    .feature { /* 任一条件满足就生效 */ }
}

CSS 变量 + 媒体查询（响应式配置）

css 复制代码

:root {
    /* 默认值（移动端） */
    --font-size-base: 14px;
    --spacing-base: 8px;
    --columns: 1;
}

@media (min-width: 768px) {
    :root {
        --font-size-base: 16px;
        --spacing-base: 16px;
        --columns: 2;
    }
}

@media (min-width: 1024px) {
    :root {
        --font-size-base: 18px;
        --spacing-base: 24px;
        --columns: 3;
    }
}

/* 使用变量 */
body { font-size: var(--font-size-base); }
.grid { display: grid; grid-template-columns: repeat(var(--columns), 1fr); }

容器查询（Container Queries）🔥 新特性

这是响应式设计的新革命！不同于媒体查询依赖视口宽度，容器查询依赖父容器宽度：

css 复制代码

/* 定义容器 */
.card-container {
    container-type: inline-size;
    container-name: card;
}

/* 根据容器宽度变化（不依赖视口！） */
@container card (min-width: 400px) {
    .card {
        display: flex;
        flex-direction: row;
    }
    
    .card-image {
        width: 50%;
    }
}

🛠️ 实战场景

场景 1：响应式导航菜单

css 复制代码

/* 默认：汉堡菜单（移动端） */
.nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
}

.hamburger {
    display: block;
    cursor: pointer;
}

/* 桌面：横向导航 */
@media (min-width: 768px) {
    .nav-links {
        display: flex;
        position: static;
        gap: 24px;
        background: transparent;
    }
    
    .hamburger {
        display: none;
    }
}

场景 2：响应式网格布局

css 复制代码

.grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr; /* 默认单列 */
}

@media (min-width: 576px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}

场景 3：深色模式适配

css 复制代码

/* 基础样式 */
:root {
    --bg-color: #ffffff;
    --text-color: #333333;
}

/* 系统级深色模式 */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1a1a1a;
        --text-color: #f0f0f0;
    }
}

/* 手动切换（需配合 JS） */
[data-theme="dark"] {
    --bg-color: #1a1a1a;
    --text-color: #f0f0f0;
}

场景 4：无障碍：减少动画

css 复制代码

/* 用户设置"减少动画偏好"时关闭动画 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

📊 浏览器支持情况

特性	Chrome	Firefox	Safari	Edge
基础媒体查询	✅ 1+	✅ 1+	✅ 1+	✅ 12+
`orientation`	✅ 9+	✅ 6+	✅ 5+	✅ 12+
`hover/pointer`	✅ 41+	✅ 64+	✅ 9+	✅ 12+
`prefers-color-scheme`	✅ 76+	✅ 67+	✅ 12.1+	✅ 79+
`prefers-reduced-motion`	✅ 74+	✅ 63+	✅ 10.1+	✅ 79+
容器查询	✅ 105+	✅ 110+	✅ 15.4+	✅ 105+

⚠️ 最佳实践

✅ 推荐做法

移动优先：先写移动端样式，逐步增强
使用相对单位 ：em、rem、%、vw、vh
合理断点：使用主流断点，避免碎片化
测试真实设备：模拟器 ≠ 真机

❌ 避免做法

css 复制代码

/* 过多精确断点 - 维护困难 */
@media (min-width: 321px) { }
@media (min-width: 376px) { }
@media (min-width: 415px) { }
@media (min-width: 480px) { }

/* ✅ 统一使用标准断点 */
@media (min-width: 576px) { }
@media (min-width: 768px) { }
@media (min-width: 992px) { }

🎯 总结

媒体查询核心要点：

知识点	说明
`@media`	媒体查询的入口
媒体类型	`screen`、`print`、`speech`
媒体特征	`min/max-width`、`orientation`、`hover`
断点策略	移动优先优于桌面优先
新特性	容器查询是未来方向

掌握以上内容，你就能轻松应对各种响应式设计需求！

💡 提示：别忘了考虑无障碍需求（prefers-reduced-motion）和深色模式（prefers-color-scheme）！

如果你觉得这篇文章有帮助，欢迎：

👍 点赞
❤️ 收藏
👀 关注我

有什么问题欢迎在评论区留言交流！ 🙏