前端Wiki/CSS3/深入/媒体查询与响应式

媒体查询语法

媒体查询让样式「按条件生效」，是响应式设计的核心工具。基本结构：

@media 媒体类型 and (媒体特征)：类型有 screen（屏幕）、print（打印），多数场景只写特征即可。
常用特征：min-width / max-width（视口宽度）、orientation: portrait/landscape（横竖屏）、prefers-color-scheme（深色模式偏好）。
条件可用 and（与）、逗号（或）、not（非）组合。

两种用法：@media 块直接嵌样式；或在 <link> 上加 media 属性按设备加载不同 CSS 文件。实战推荐前者，避免多请求。

别忘了响应式的另一半前提——viewport meta 标签 <meta name="viewport" content="width=device-width, initial-scale=1">。没有它，手机会把页面当 980px 桌面宽度缩放显示，媒体查询形同虚设。

本节要点@media + (min-width/max-width) 按视口宽度分包样式；可组合 and/逗号/not；响应式必须先写 viewport meta 标签。

CSS

<style>
  .box {
    background: #b2ebf2;
    padding: 12px;
  }
  /* 平板及以上：最小 600px */
  @media (min-width: 600px) {
    .box { background: #80deea; }
  }
  /* 桌面：最小 900px，可用 and 叠加条件 */
  @media (min-width: 900px) and (orientation: landscape) {
    .box { background: #26c6da; color: #fff; }
  }
  /* 跟随系统深色模式 */
  @media (prefers-color-scheme: dark) {
    body { background: #222; color: #eee; margin: 0; }
  }
</style>
<div class="box">拖动窗口宽度看我变色</div>

🔗 相关词条媒体查询 meta CSS 标签

📚 推荐阅读

移动前端开发经验指南万象云档

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

Element Plus v2.2 组件库教程万象云档

ECharts 图表教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读