CSS 媒体查询详解 🌐

媒体查询是实现响应式网页设计的核心技术，通过检测设备特性（如屏幕宽度、分辨率等）来应用不同的CSS样式。以下是关键知识点：

📌 基本语法

@media 媒体类型 and (媒体特性) {
  /* 样式规则 */
}

• 常见媒体类型：screen（屏幕）、print（打印）
• 媒体特性示例：
  • min-width / max-width
  • orientation（横竖屏）
  • resolution（分辨率）

📊 常见应用场景

• 移动端适配：

  @media screen and (max-width: 600px) {
    body { font-size: 14px; }
  }
  

• 打印优化：

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

• 高分辨率显示：

  @media screen and (resolution: 2dppx) {
    img { width: 50%; }
  }
  

📌 扩展阅读

点击查看「响应式设计进阶」教程
了解更多关于断点设置、容器布局等高级技巧。