tutorials/css-media-queries

🎯 CSS媒体查询教程

媒体查询是响应式网页设计的核心技术，允许根据设备特性（如屏幕宽度、分辨率等）调整CSS样式。通过媒体查询，我们可以实现网站在不同设备上的自适应布局。

📌 基本概念

• 断点（Breakpoints）：定义不同设备尺寸的样式切换点，如 max-width: 768px
• 媒体类型（Media Types）：支持 screen（显示器）、print（打印）、speech（语音设备）等
• 媒体特性（Media Features）：如 width、height、orientation（方向）、resolution（分辨率）

📝 语法示例

@media 媒体类型 and (媒体特性) {
  /* 在此定义响应式样式 */
}

例如：

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

🖼️ 常见媒体特性应用

• 📱 screen：移动端适配（推荐使用 min-width 和 max-width 组合）
• 🖥️ orientation：横竖屏切换（如 orientation: portrait）
• 📷 resolution：高分辨率屏幕优化（如 min-resolution: 2dppx）

💡 实践技巧

1. 从大屏幕到小屏幕的顺序编写媒体查询
2. 使用 rem 或 vw/vh 单位实现相对布局
3. 结合 flexbox 或 grid 布局提升响应式效果

🔗 想深入了解CSS动画？可参考本站教程：/css-animations

📌 注意事项

• 避免过度使用媒体查询导致性能下降
• 使用 @media 时注意单位和值的准确性
• 测试时需考虑设备像素比（dppx）对渲染的影响