@media

语法

  • @media:<media_query_list>
  • <media_query_list>:[<media_query>[',' <media_query>]*]?
  • <media_query>:[only | not]? <media_type> [and <expression>] | <expression> [and <expression>]
  • <expression>:'('<media_feature>[:<value>]?')'

取值

  • <media_type>:指定设备类型。媒体类型包括:参阅媒体类型。(CSS2)
  • <expression>:指定媒体查询使用的媒体特性。这类似于CSS属性,如:max-width:960px。(CSS3)

说明

指定样式表规则用于指定的媒体类型和查询条件。

  • IE8及以下只能实现CSS2中的部分,即只可以设置媒体类型。
  • 媒体查询可以被用在CSS中的@media和@import规则上,也可以被用在HTML和XML中。

示例代码:

@media screen and (width:800px){ … }
@import url(example.css) screen and (width:800px);
  • 列举几种使用方式:
@media all and (width:1024px){
    body{color:#f00;}
}
@media all and (device-height:800px){ … }
@media all and (orientation:landscape){ … }
@media all and (device-aspect-ratio:16/10){ … }
@media all and (min-color:1){ … }
@media all and (monochrome:0){ … }
@media all and (grid:0){ … }

兼容性

IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
6.0-8.0 2.0+ 4.0+ 3.1+ 15.0+ 3.2+ 2.1+ 18.0+
9.0+

示例


<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<style>
.test,
.test2 {
    display: none;
}
/* 本条为CSS2部分,IE8及以下只支持本条 */
@media screen {
    body{ color: #f00; }
}
/* 下列为CSS3部分 */
@media screen and (min-width: 960px) {
    body{ background: #999; }
}
@media screen and (device-width: 1024px) {
    .test { display: block; }
}
@media screen and (width: 1024px) {
    .test2 { display: block; }
}
</style>
</head>
<body>
<div>Media Queries媒体查询</div>
<div class="test">如果你的显示器水平分辨率为1024px的话将能看到本条规则的效果(取决于输出设备屏幕分辨率的大小,不随包括浏览器在内的窗体大小而改变)</div>
<div class="test2">如果视口宽度为1024px的话将能看到本条规则的效果(随包括浏览器在内的窗体大小而改变)</div>
</body>
</html>