有两组相同的类似乎很奇怪，但是它给了我们机会用 HTML 来决定在每个断点处的列会发生什么：

HTML 实例

对于台式机：

第一和第三部分都会跨越 3 列。中间部分将跨越 6 列。

对于平板电脑：

第一部分将跨越 3 列，第二部分将跨越 9 列，第三部分将显示在前两部分的下方，并将跨越 12 列：

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

亲自试一试

典型的设备断点

高度和宽度不同的屏幕和设备不计其数，因此很难为每个设备创建精确的断点。为了简单起见，您可以瞄准这五组：

实例

/* 超小型设备（电话，600px 及以下） */@media only screen and (max-width: 600px) {...} /* 小型设备（纵向平板电脑和大型手机，600 像素及以上） */@media only screen and (min-width: 600px) {...} /* 中型设备（横向平板电脑，768 像素及以上） */@media only screen and (min-width: 768px) {...} /* 大型设备（笔记本电脑/台式机，992px 及以上） */@media only screen and (min-width: 992px) {...} /* 超大型设备（大型笔记本电脑和台式机，1200px 及以上） */@media only screen and (min-width: 1200px) {...}

亲自试一试

方向：人像 / 风景

媒体查询还可用于根据浏览器的方向来更改页面的布局。

您可以设置一组 CSS 属性，这些属性仅在浏览器窗口的宽度大于其高度时才适用，即所谓的“横屏”方向：

实例

如果方向为横向模式（landscape mode），则网页背景为浅蓝色：

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }}

亲自试一试

用媒体查询隐藏元素

媒体查询的另一种常见用法是在不同屏幕尺寸上对元素进行隐藏：

实例

/* 如果屏幕尺寸为 600 像素或更小，请隐藏该元素 */@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }}

亲自试一试

用媒体查询修改字体

您还可以使用媒体查询来更改不同屏幕尺寸上的元素的字体大小：

实例

/* 如果屏幕尺寸为 601px 或更大，请将 <div> 的 font-size 设置为 80px */@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }}/* 如果屏幕尺寸为 600px 或更小，请将 <div> 的 font-size 设置为 30px */@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }}

亲自试一试

CSS @media 参考手册

有关所有媒体类型和特性/表达式的完整概述，请在 CSS 参考手册中参阅 @media 规则。