Web前端开发：@media（媒体查询）
什么是媒体查询？
媒体查询是CSS3的一个功能，允许你根据设备的特性（如屏幕宽度、设备方向、分辨率等）应用不同的CSS样式。简单来说，就是让网页在不同设备上（手机、平板、电脑）自动调整布局和样式。
为什么需要媒体查询？
-
📱 手机屏幕小，电脑屏幕大，布局需要适配。
-
🌓 横屏和竖屏显示的内容可能需要不同排版。
-
🖥️ 高分辨率屏幕可能需要更清晰的图片。
基本语法
@media [媒体类型] and (媒体特性) {/* 满足条件时应用的CSS样式 */
}1. 媒体类型（可选）
-
screen：屏幕设备（默认值） -
print：打印机 -
all：所有设备
2. 媒体特性（核心）
-
min-width：视口宽度大于等于某个值时生效。 -
max-width：视口宽度小于等于某个值时生效。 -
orientation: landscape：横屏时生效。 -
orientation: portrait：竖屏时生效。
常见用法举例
场景1：手机 vs 电脑
/* 默认样式（电脑端） */
.container {width: 1200px;
}/* 当屏幕宽度 ≤ 768px 时（手机端） */
@media (max-width: 768px) {.container {width: 100%; /* 占满屏幕宽度 */padding: 10px;}
}场景2：横屏 vs 竖屏
/* 竖屏时隐藏侧边栏 */
@media (orientation: portrait) {.sidebar {display: none;}
}场景3：高清屏适配
/* 高分辨率屏幕（如Retina）使用2倍图 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {.logo {background-image: url("logo@2x.png");}
}组合条件
可以同时满足多个条件：
/* 屏幕宽度在600px到900px之间时生效 */
@media (min-width: 600px) and (max-width: 900px) {.card {width: 50%;}
}
注意事项
-
移动优先原则：建议先写手机端样式，再用
min-width逐步适配大屏。 -
不要滥用：媒体查询太多会让代码难维护，优先使用弹性布局（Flexbox/Grid）。
-
测试工具：用浏览器开发者工具（F12）切换设备模式调试。
总结
媒体查询是响应式设计的核心工具，通过判断设备特性动态调整样式。记住这个公式：
“如果设备满足某条件，就应用某样式”
👉 @media (条件) { 样式 }
试着在项目中实践，你会立刻感受到它的强大！ 🚀