同一份页面，电脑上是宽敞的多栏布局，到手机上还挤成三栏就没法看了。媒体查询（Media Query）就是 CSS 提供的"看菜下饭"工具：根据屏幕宽度等条件，给不同的设备套用不同的样式。

基本语法

媒体查询用 @media 开头，括号里写条件，条件成立时才会应用花括号里的样式：

/* 屏幕宽度不超过 600px 时生效（一般是手机） */
@media (max-width: 600px) {
  body {
    background-color: #ffeaa7;
  }
}

max-width: 600px 的意思是"最大到 600px"，也就是屏幕小于等于 600px 时生效；反过来 min-width: 601px 就是"最小 601px"，即大于等于 601px 时生效。

拿记事本写个小页面，来回拖动浏览器窗口宽度，就能直观看到背景色什么时候变色。

移动优先的写法

推荐的习惯是"移动优先"：默认样式按手机写，再用 min-width 给更大的屏幕逐级加样式：

.container {
  padding: 12px;
}

/* 平板及以上 */
@media (min-width: 768px) {
  .container {
    padding: 24px;
  }
}

/* 电脑及以上 */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
    margin: 0 auto;
  }
}

这样写的逻辑是"一层层往上加"，手机端也不用加载用不到的复杂布局。

经典场景：多栏变单栏

媒体查询最常见的用途就是布局切换。电脑上侧边栏和内容并排，手机上变成上下堆叠：

.layout {
  display: flex;
  gap: 16px;
}

.sidebar { width: 240px; }
.main    { flex: 1; }

@media (max-width: 768px) {
  .layout {
    flex-direction: column;  /* 改成上下排列 */
  }
  .sidebar {
    width: auto;
  }
}

窗口宽度小于等于 768px 时，侧边栏会跑到内容上方，变成常见的手机版式。

条件可以组合

多个条件用 and 连接，全部满足才生效：

/* 宽度在 600px 到 1024px 之间（大概平板范围） */
@media (min-width: 600px) and (max-width: 1024px) {
  .banner {
    font-size: 20px;
  }
}

用逗号分隔表示"或"，任一条件满足就生效：

/* 正在打印，或屏幕宽度小于 500px 时 */
@media print, (max-width: 500px) {
  .ad {
    display: none;
  }
}

少了 viewport 一切白搭

手机浏览器默认会假装自己是 980px 宽的桌面浏览器，再把整页缩小显示。想让媒体查询在手机上按真实宽度生效，HTML 里必须有这行：

<meta name="viewport" content="width=device-width, initial-scale=1">

少了它，你写的 max-width: 600px 在手机上很可能根本不触发——这是新手"媒体查询明明写了却不生效"的最常见原因。

小结

  • max-width 针对小屏，min-width 针对大屏，别把方向记反；
  • 习惯移动优先：默认写手机样式，用 min-width 逐级增强；
  • 最经典的用法是在宽度阈值处切换布局，比如多栏变单栏；
  • 条件可用 and 组合，逗号表示"或"；
  • <meta name="viewport"> 是手机端生效的前提，先检查它再排查别的问题。