CSS 媒体查询和使用可用空间

我们已经介绍了如何使用 CSS 媒体查询来分配 根据浏览器窗口大小的不同样式表。 在那个例子中，我们根据可用空间改变了整个页面的布局。 但是，我们并不需要用这种技术进行如此大的改变，因此在本教程中，我们将介绍一个范围较小的设计调整。 我们还将介绍在单个样式表中使用媒体查询的语法以及更多示例。

用于调用外部样式表的 CSS 媒体查询语法如下

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

您可能熟悉 media 属性，通常为“screen”或“print”，甚至可以是逗号分隔的列表，例如“screen, projection”。 media 属性可以像这样直接放在 CSS 文件中

@media screen {
  body {
    width: 75%;
  }
}

@media print {
  body {
    width: 100%;
  }
}

同样，您可以使用更高级的 CSS 媒体查询，例如

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  body {
    background: #ccc;
  }
}

您可以在 CSS 文件中使用任意数量的媒体查询。 请注意，您可以使用 and 运算符来要求多个查询为真，但您必须使用逗号 (,) 作为 or 运算符来分隔多个查询的组。 not 关键字也可以用于更改逻辑。

示例

假设我们有一个流体宽度设计，其中侧边栏占页面宽度的 35%。 这意味着根据浏览器窗口的宽度，侧边栏可能非常窄或非常宽，这只是流体宽度设计的性质。 通过 CSS 媒体查询，我们可以说“如果浏览器真的很窄，就执行此操作，如果它更宽，就执行此操作，如果它真的很宽，就执行此操作。” 请注意，测量宽度并不是媒体查询可以执行的唯一操作，它只是一个特别实用的例子。

在我们的示例侧边栏中，我们将有一个超级团队名称列表，这些名称充当电子邮件链接。 HTML 相当简单

<ul id="nav">
   <li><a data-email="[email protected]" href="mailto:[email protected]">Chris Coyier</a></li>
   <li><a data-email="[email protected]" href="mailto:[email protected]">Elisabeth Moss</a></li>
   <li><a data-email="[email protected]" href="mailto:[email protected]">Amanda Righetti</a></li>
</ul>

它只是一个链接列表。 href 属性是 mailto: 链接。 您可能发现唯一不寻常的是 data-email 属性。 在 HTML5 中，您可以 使用以 data- 为前缀的属性 来存储信息，这是完全有效的。 我们将希望稍后使用这些数据，但 href 值并不完全是我们想要的，因为它包含 mailto: 链接，因此使用了数据属性。

列表的默认样式如下

#sidebar ul li a {
  color: #900;
  text-decoration: none;
  padding: 3px 0; 
  display: block;
}

当浏览器变得更宽时，在我们的例子中，在 520 到 699 像素之间，我们将使用侧边栏中打开的额外空间，为每个列表项应用电子邮件图标。

@media all and (max-width: 699px) and (min-width: 520px) {
  #sidebar ul li a {
    padding-left: 21px;
    background: url(../images/email.png) left center no-repeat;
  }
}

随着我们变得更宽，从 700 到 1000 像素，我们将再次使用额外空间，在链接前加上文本“电子邮件：”（使用 CSS 内容），而不是只使用图标。

@media all and (max-width: 1000px) and (min-width: 700px) {
  #sidebar ul li a:before {
    content: "Email: ";
    font-style: italic;
    color: #666;
  }
}

更宽，在浏览器窗口宽度超过 1001 像素时，我们将直接将电子邮件地址附加到链接。 这就是 HTML5 数据属性的用武之地。

@media all and (min-width: 1001px) {
  #sidebar ul li a:after {
    content: " (" attr(data-email) ")";
    font-size: 11px;
    font-style: italic;
    color: #666;
  }
}

在非常宽的宽度，超过 1151 像素时，我们将再次添加我们之前使用的图标。 这里很酷的一点是，我们不需要编写额外的媒体查询段，而是在我们已经编写的中等宽度媒体查询上附加一个额外的媒体查询，使用逗号（行为类似于 OR 运算符）。

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  #sidebar ul li a {
    padding-left: 21px;
    background: url(../images/email.png) left center no-repeat;
  }
}

现在一起

#sidebar ul li a {
  color: #900;
  text-decoration: none;
  padding: 3px 0; 
  display: block;
}

@media all and (min-width: 1001px) {
  #sidebar ul li a:after {
    content: " (" attr(data-email) ")";
    font-size: 11px;
    font-style: italic;
    color: #666;
  }
}

@media all and (max-width: 1000px) and (min-width: 700px) {
  #sidebar ul li a:before {
    content: "Email: ";
    font-style: italic;
    color: #666;
  }
}

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  #sidebar ul li a {
    padding-left: 21px;
    background: url(../images/email.png) left center no-repeat;
  }
}

视频演示

实时演示/下载

查看演示   下载文件

浏览器支持

媒体查询的浏览器支持出奇地好。 对于此特定演示中的查询（使用最小和最大宽度），Firefox、Safari（包括 Mobile）、Chrome 和 Opera 的当前版本都支持它。 Internet Explorer 9 将支持它，但 8 及更低版本不支持。 如果我想在 IE 8 及更低版本中提供最佳体验，我将像在 这篇文章 中一样使用 JavaScript 来伪造它，或者使用 IE 专用样式表 并根据分析来使用与最常见浏览器宽度相同的样式。

请注意，不同类型的查询的里程数可能会有所不同。 例如，iPhone 支持宽度查询，但不支持 方向查询。 iPad 支持两者。

更多关于媒体查询的信息

测量宽度是媒体查询的一个很好的实际例子，但它不是唯一可用的选项。 以下是一些其他的（并非全面列表）。 规范 列出了更多内容。

类型

HTML4 有这些媒体类型，它们仍然有效aural, braille, handheld, print, projection, screen, tty和tv。 HTML5 可能会根据需要包含更多内容。 规范包括“3d-glasses”，非常棒。 这all关键字将针对所有类型。

@media screen, projection { ... }

尺寸

您可以获得height和width，它们会针对当前浏览器窗口的高度和宽度进行查询。 您可以直接使用它们，但这可能很少见。 它们都接受 min/max 前缀，因此更常见的是使用它们作为min-width, max-width, min-height, max-height.

还有device-width和device-height，它们也提供min-device-width, max-device-width, min-device-height和max-device-height.

@media (min-device-width: 640px) { ... }

方向/纵横比

您也可以使用以下命令针对屏幕的纵横比进行查询device-aspect-ratio.

@media screen and (device-aspect-ratio: 16/9) { ... }

或者如果屏幕处于纵向（高度大于宽度）或横向（宽度大于高度）模式。

@media (orientation:portrait) { ... }

颜色

你可以查询屏幕是否为彩色以及相关详细信息。

@media (color) { /* Screen is in color */ }

@media (min-color-index: 256) { /* Screen has at least 256 colors */ }

@media (monochrome) { /* Screen is monochrome */ }

其他地方

这最近一直是个热门话题。 你可以听到一些聪明人谈论它 在 The Big Web Show 上。 这里有一些其他最近流行的酷炫用法

• Andy Clarke 展示了如何 行长越长，文本的可读性越好，行高越高。
• Jon Hick 的网站 根据可用空间重新排列，可以具有双边栏、单边栏或无边栏。 它甚至可以很好地缩放到移动尺寸。
• Ethan Marcotte 的 A List Apart 演示没有使用媒体查询，但展示了其他设计可以有效地灵活 的方式。
• Simon Collison 的网站 重新排列它的网格以适应不同的浏览器大小。
• Panic 使用@media 在他们的 HTML 电子邮件中 使它们在桌面或移动电子邮件客户端中看起来很棒。