CSS mediefrågor

CSS2 introducerade medietyper

CSS2 introducerade @media Regler som gör det möjligt att definiera olika stilregler för olika medietyper.

Till exempel: Du kan ha ett uppsättning stilregler för datorskärmar, ett uppsättning för skrivare, ett uppsättning för handhållna enheter, och till och med ett uppsättning för TV, och så vidare.

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

CSS3 引入了媒体查询

CSS3 中的媒体查询扩展了 CSS2 媒体类型的概念：它们并不查找设备类型，而是关注设备的能力。

媒体查询可用于检查许多事情，例如：

  • 视口的宽度和高度
  • 设备的宽度和高度
  • 方向（平板电脑/手机处于横向还是纵向模式）
  • 分辨率

使用媒体查询是一种流行的技术，可以向台式机、笔记本电脑、平板电脑和手机（例如 iPhone 和 Android 手机）提供定制的样式表。

浏览器支持

表格中的数字注明了完全支持 @media 规则的首个浏览器版本。

属性
@media 21.0 9.0 3.5 4.0 9.0

媒体查询语法

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

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

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

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

您还可以针对不同的媒体使用不同的样式表：

CSS3 媒体类型

值 描述
all 用于所有媒体类型设备。
print 用于打印机。
screen 用于计算机屏幕、平板电脑、智能手机等等。
speech 用于大声“读出”页面的屏幕阅读器。

媒体查询的简单实例

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

下面的例子在视口宽度为 480 像素或更宽时将背景颜色更改为浅绿色（如果视口小于 480 像素，则背景颜色会是粉色）：

实例

@media screen and (min-width: 480px) {}}
  body {
    background-color: lightgreen;
  }
}

Prova själv

下例显示了一个菜单，如果视口的宽度为 480 像素或更宽，则该菜单会浮动到页面的左侧（如果视口小于 480 像素，则该菜单将位于内容的顶部）：

实例

@media screen and (min-width: 480px) {}}
  #leftsidebar {bredd: 200px; flyt: vänster;}
  #main {marginal till vänster: 216px;}
}

Prova själv

Mer mediefrågor exempel

För fler exempel på mediefrågor, besök nästa sida:CSS MQ-exempel.

CSS @media referenshandbok

En fullständig översikt över alla medietyper och egenskaper/uttryck, se vår CSS referens @media-regel.