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%;
  }
}

 

注意事项

1. 移动优先原则：建议先写手机端样式，再用 min-width 逐步适配大屏。

2. 不要滥用：媒体查询太多会让代码难维护，优先使用弹性布局（Flexbox/Grid）。

3. 测试工具：用浏览器开发者工具（F12）切换设备模式调试。

 

总结

媒体查询是响应式设计的核心工具，通过判断设备特性动态调整样式。记住这个公式：

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

试着在项目中实践，你会立刻感受到它的强大！ 🚀