目录

CSS 媒体查询


CSS2 引入的媒体类型

这个@mediaCSS2 中引入的规则使得为不同的媒体类型定义不同的样式规则成为可能。

示例:您可以拥有一套用于计算机屏幕的样式规则,一套用于打印机,一套用于手持设备,一套用于电视类型设备,等等。

不幸的是,除了打印媒体类型之外,这些媒体类型从未得到设备的大量支持。


CSS3 引入媒体查询

CSS3 中的媒体查询扩展了 CSS2 媒体类型的想法:它们不是寻找设备类型,而是查看设备的功能。

媒体查询可用于检查很多事情,例如:

  • 视口的宽度和高度
  • 设备的宽度和高度
  • 方向(平板电脑/手机处于横向还是纵向模式?)
  • 解决

使用媒体查询是一种向台式机、笔记本电脑、平板电脑和移动电话(例如 iPhone 和 Android 手机)提供定制样式表的流行技术。


浏览器支持

表中的数字指定第一个完全支持的浏览器版本@media规则。

Property
@media 21.0 9.0 3.5 4.0 9.0

媒体查询语法

媒体查询由媒体类型组成,并且可以包含一个或多个表达式,这些表达式解析为 true 或 false。

@media not|only mediatype and ( expressions) {
  CSS-Code;
}

如果指定的媒体类型与显示文档的设备类型匹配并且媒体查询中的所有表达式都为 true,则查询结果为 true。当媒体查询为真时,将遵循正常的级联规则应用相应的样式表或样式规则。

除非您使用 not 或 only 运算符,否则媒体类型是可选的,并且all类型将被隐含。

您还可以为不同的媒体使用不同的样式表:

<link rel="stylesheet" media=" mediatype and|not|only ( expressions)" href=" print.css">


CSS3 媒体类型

Value Description
all Used for all media type devices
print Used for printers
screen Used for computer screens, tablets, smart-phones etc.
speech Used for screenreaders that "reads" the page out loud

媒体查询简单示例

使用媒体查询的一种方法是在样式表内有一个备用 CSS 部分。

如果视口宽度为 480 像素或更宽,以下示例将背景颜色更改为浅绿色(如果视口小于 480 像素,则背景颜色将为粉红色):

示例

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}
亲自试一试 »

以下示例显示了如果视口宽度为 480 像素或更宽,则菜单将浮动到页面左侧(如果视口小于 480 像素,菜单将位于内容顶部):

示例

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}
亲自试一试 »

更多媒体查询示例

有关媒体查询的更多示例,请转到下一页:CSS MQ 示例


CSS @media 参考

有关所有媒体类型和功能/表达的完整概述,请查看CSS 参考中的 @media 规则