前端必备技能：玩转CSS媒体查询@media，轻松实现响应式设计_css media

        你是否遇到过这样的问题：电脑上精美的网页在手机上却布局错乱？横屏和竖屏切换时页面排版一团糟？别担心，今天就来揭秘前端开发中的“神器”——@media媒体查询，教你如何用一行代码让网页适配所有设备！

一、什么是@media？

@media 是 CSS3 中的媒体查询规则，通过判断设备特性（如屏幕宽度、分辨率、横竖屏等），动态应用不同的CSS样式。简单来说，它能实现：

• 响应式布局：自动适配手机、平板、电脑等不同屏幕尺寸。
• 设备适配：针对打印机、高分辨率屏幕（如Retina屏）优化显示效果。
• 动态交互：根据用户行为（如横竖屏切换）调整页面排版。

二、@media的核心语法

1. 基本结构

@media 媒体类型 and (媒体特性) { /* 符合条件的CSS样式 */ } 

• 媒体类型（可选）：

• screen：屏幕设备（默认）

• print：打印设备

• all：所有设备

• 媒体特性（核心）：

  • 屏幕尺寸：min-width（最小宽度）、max-width（最大宽度）
  • 设备方向：orientation: portrait（竖屏）、landscape（横屏）
  • 分辨率：min-resolution（高分辨率适配）

2. 示例代码

场景1：响应式布局（手机 vs 电脑）

/* 默认样式（电脑端） */ .container { width: 1200px; } /* 手机端（屏幕宽度≤768px） */ @media (max-width: 768px) { .container { width: 100%; padding: 10px; } } 

场景2：横竖屏适配

/* 竖屏隐藏侧边栏 */ @media (orientation: portrait) { .sidebar { display: none; } } 

场景3：打印优化

/* 打印时隐藏广告 */ @media print { .ad-banner { display: none; } } 

三、@media的五大应用场景

1. 响应式断点布局

通过设定屏幕宽度阈值（如768px、992px），实现不同设备的布局切换。

/* 移动优先：先写手机样式，再逐步适配大屏 */ body { font-size: 14px; } @media (min-width: 768px) { font-size: 16px; } @media (min-width: 1200px) { font-size: 18px; } 

最佳实践：遵循**“移动优先”原则**，优先编写小屏幕样式，再通过min-width扩展到大屏。

2. 高分辨率屏幕适配

针对Retina屏等高分辨率设备，提供2倍图或矢量图标。

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .logo { background-image: url(\"logo@2x.png\"); } } 

适用场景：高清屏设备（如iPhone、高端安卓机）。

3. 设备方向适配

根据用户横竖屏切换调整布局。

/* 横屏显示双栏布局 */ @media (orientation: landscape) { .main { display: flex; } } 

适用场景：阅读类App、视频播放页。

4. 打印样式优化

隐藏非必要元素（如导航栏、广告），节省纸张和墨水。

@media print { .nav, .ad { display: none; } a { color: black; text-decoration: none; } } 

适用场景：需打印的报表、文章页面。

5. 暗色模式适配

结合CSS变量，实现自动切换暗色主题。

:root { --bg-color: white; --text-color: black; } @media (prefers-color-scheme: dark) { :root { --bg-color: #333; --text-color: white; } } body { background: var(--bg-color); color: var(--text-color); } 

适用场景：支持系统级暗色模式的网站。

四、高级技巧与避坑指南

1. 组合查询

通过and、or、not组合多个条件。

/* 屏幕宽度600~900px且横屏时生效 */ @media (min-width: 600px) and (max-width: 900px) and (orientation: landscape) { .card { width: 50%; } } 

2. 避免滥用

• 优先使用弹性布局（Flexbox/Grid）解决简单适配问题。
• 媒体查询过多会导致代码冗余，建议通过CSS预处理器（如Sass）管理。

3. 测试工具

• 浏览器开发者工具（F12）：模拟不同设备尺寸。
• 真机调试：使用Chrome远程调试功能。

五、总结

@media媒体查询是响应式设计的核心工具，掌握它能让你的网页在不同设备上“游刃有余”。记住这个公式：

“如果设备满足某条件，就应用某样式”
👉 @media (条件) { 样式 }

赶紧在项目中实践吧！如果遇到问题，欢迎留言讨论～

新时代农民工