css 媒体查询（长文讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
• 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在网页开发中，让页面适配不同设备的屏幕尺寸和类型是一项核心技能。CSS 媒体查询（CSS Media Queries）作为实现响应式设计的核心工具，通过动态感知设备特性（如屏幕宽度、分辨率、方向等），能够为不同环境下的用户呈现最优化的视觉效果。无论是编程初学者还是中级开发者，掌握这一技术都能显著提升代码的灵活性与用户体验。本文将从基础概念到实战案例，逐步解析如何用css 媒体查询打造适应性更强的网页。

一、媒体查询的核心概念

1.1 什么是媒体查询？

媒体查询是一种允许开发者根据设备特性动态调整样式的技术。它好比一个“智能开关”——当设备满足特定条件时（如屏幕宽度小于768像素），就会触发预设的CSS规则，从而让页面布局、字体大小或元素显示方式自动适配。

1.2 媒体查询的典型应用场景

• 响应式布局：根据屏幕宽度调整导航栏的显示形式（如从水平排列变为下拉菜单）。
• 设备类型适配：为打印页面隐藏导航栏或调整颜色对比度。
• 动态内容优化：在移动设备上隐藏复杂图表，或为触屏用户放大按钮。

1.3 媒体查询的基本语法结构

媒体查询的语法基于@media规则，其核心结构为：

@media [媒体类型] (特征条件) {  
  /* 需要应用的CSS样式 */  
}  

例如：

/* 当屏幕宽度小于768px时触发 */  
@media (max-width: 768px) {  
  .container {  
    width: 100%;  
  }  
}  

二、媒体查询的语法详解

2.1 媒体类型（Media Types）

媒体类型定义了目标设备的类别，例如：

• screen：适用于电脑、平板、手机等屏幕设备（最常用）。
• print：针对打印预览或打印输出的样式。
• speech：用于屏幕阅读器等语音输出设备。

示例：为打印页面隐藏侧边栏：

@media print {  
  .sidebar {  
    display: none;  
  }  
}  

2.2 媒体特征（Media Features）

媒体特征用于描述设备的具体属性，常见的包括：

• 宽度与高度：min-width、max-width、min-height、max-height。
• 方向：orientation: portrait（竖屏）或 landscape（横屏）。
• 分辨率：resolution（如96dpi）或min-resolution。
• 设备像素比：device-pixel-ratio（如Retina屏幕为2）。

示例：当屏幕方向为横屏时隐藏导航栏：

@media screen and (orientation: landscape) {  
  .navbar {  
    display: none;  
  }  
}  

2.3 组合条件与逻辑运算符

通过逻辑运算符and、not、only可以组合多个条件，实现更复杂的规则：

• and：多个条件必须同时满足。
• not：排除特定条件。
• only：仅在满足条件时生效（常用于兼容旧浏览器）。

示例：当屏幕宽度介于768px到1024px之间时应用样式：

@media screen and (min-width: 768px) and (max-width: 1024px) {  
  body {  
    font-size: 1.2rem;  
  }  
}  

三、媒体查询的高级技巧

3.1 嵌套与优先级管理

媒体查询内的样式会覆盖全局样式，但需注意CSS的优先级规则。例如：

/* 全局样式 */  
.button {  
  background: blue;  
}  

/* 媒体查询覆盖 */  
@media (max-width: 600px) {  
  .button {  
    background: red;  /* 此时红色生效 */  
  }  
}  

3.2 动态资源加载

通过@import在媒体查询中加载不同的CSS文件，适合大型项目：

/* 在主CSS文件中 */  
@import url("mobile.css") screen and (max-width: 600px);  

3.3 移动优先设计模式

建议采用“移动优先”策略：先为小屏幕编写基础样式，再通过媒体查询扩展大屏幕的样式。例如：

/* 默认移动端样式 */  
.container {  
  flex-direction: column;  
}  

/* 大于768px时改为行布局 */  
@media (min-width: 768px) {  
  .container {  
    flex-direction: row;  
  }  
}  

四、实战案例：构建响应式导航栏

4.1 需求分析

目标：设计一个导航栏，在桌面端显示水平菜单，移动端折叠为汉堡图标。

4.2 HTML结构

<nav class="navbar">  
  <div class="logo">Logo</div>  
  <ul class="menu">  
    <li><a href="#">首页</a></li>  
    <li><a href="#">产品</a></li>  
    <li><a href="#">关于我们</a></li>  
  </ul>  
  <button class="hamburger">&#9776;</button>  
</nav>  

4.3 CSS实现

/* 默认移动端样式 */  
.navbar {  
  padding: 1rem;  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
}  

.menu {  
  display: none;  /* 默认隐藏菜单 */  
}  

.hamburger {  
  display: block; /* 显示汉堡按钮 */  
}  

/* 桌面端媒体查询 */  
@media (min-width: 768px) {  
  .menu {  
    display: flex;  
    gap: 2rem;  
  }  

  .hamburger {  
    display: none; /* 隐藏按钮 */  
  }  
}  

4.4 扩展功能（JavaScript交互）

通过JavaScript实现点击汉堡图标切换菜单：

document.querySelector('.hamburger').addEventListener('click', () => {  
  document.querySelector('.menu').classList.toggle('active');  
});  

五、常见问题与最佳实践

5.1 如何选择断点（Breakpoints）？

• 根据主流设备尺寸设定，如：320px（手机）、768px（平板）、1024px（小屏幕电脑）、1440px（大屏）。
• 使用Flexbox或Grid布局可减少对固定断点的依赖。

5.2 性能优化建议

• 避免过多嵌套媒体查询，优先使用CSS变量或预处理器（如Sass）简化代码。
• 对于复杂项目，可结合CSS-in-JS库（如Emotion）动态生成样式。

5.3 常见错误排查

• 优先级冲突：检查媒体查询内的样式是否被其他规则覆盖。
• 单位混淆：确保使用px或em等相对单位，避免绝对单位如cm。

六、结论

CSS 媒体查询是构建现代网页不可或缺的工具，它让开发者能够灵活应对多设备环境。通过掌握基础语法、逻辑组合以及移动优先的设计理念，即使是编程初学者也能快速上手。而高级技巧如动态资源加载和JavaScript交互，则能进一步提升项目的专业性。

未来，随着Web技术的发展，媒体查询的功能会更加丰富，但其核心思想始终围绕“为用户提供最佳体验”这一目标。建议读者通过实战项目不断练习，并参考官方文档（如MDN Web Docs ）探索更多可能性。现在，是时候打开你的代码编辑器，尝试为自己的网页添加第一个媒体查询了！