CSS 媒体查询 media 响应式布局示例

媒体查询是响应式布局的基础：同一份 CSS，根据视口宽度、设备类型、方向等条件启用不同的样式规则。写多了会发现真正的坑不在语法，而在断点边界和规则顺序上。

两个必须注意的点。一是边界重叠：max-width: 750px 和 min-width: 750px 在正好 750px 时会同时命中，所以断点要么留 1px 间隙（749 / 751），要么统一只用一侧比较。二是媒体查询不改变 CSS 的层叠规则——它不提升优先级，多个查询同时命中时，权重相同的情况下写在后面的覆盖前面的。

下面这个 demo 把视口宽度实时打印出来，配合几组不同的断点，拖动浏览器就能直接看到命中了哪一条。

示例

样式里故意排了四组规则来演示上面两点：749 / 751 是留了间隙的安全断点；750px ~ 900px 那条和「超过 750」重叠，因为它写在后面所以在这个区间内胜出（注释里也点明了，两者调换位置结论就反过来）；最后 width: 750px 是精确等于某个宽度才生效。

配套的 JS 只做一件事：把 window.innerWidth 实时显示在页面上并监听 resize 更新，这样拖动窗口时能对照当前宽度看命中了哪条规则。注意 innerWidth 含滚动条宽度，而媒体查询按视口宽度算，某些浏览器上两者会差十几个像素，所以边界附近的颜色切换点和显示的数字不一定严格对齐。

拖动浏览器看变化

<!DOCTYPE html>
<html>
  <body>
    <div id="md-media-test" style="color: white;font-size: 30px"></div>
  </body>
  <style>
    body {
      background: #eee;
    }

    /* 低于 750 时 */
    @media (max-width: 749px) {
      #md-media-test {
        background-color: red;
      }
    }

    /* 超过 750 时 */
    @media (min-width: 751px) {
      #md-media-test {
        background-color: green;
      }
    }

    /* 在750-900之间 会覆盖上述定义的超过 750 时的样式，如果上述样式放到下面则会覆盖此条规则 */
    @media (min-width: 750px) and (max-width: 900px) {
      #md-media-test {
        background-color: blue;
      }
    }

    /*宽度等于750时的颜色*/
    @media (width: 750px) {
      #md-media-test {
        background-color: purple;
      }
    }
  </style>
</html>

document.getElementById('md-media-test').innerHTML = window.innerWidth;

window.onresize = function () {
  document.getElementById('md-media-test').innerHTML = window.innerWidth;
};