@media
使用 @media
,可以指定一个媒体查询和一个 CSS 块,当且仅当该媒体查询与正在使用其内容的设备匹配时,该 CSS 块才能应用于该文档。
在 CSS3 中,媒体查询可用于检测很多事情,例如:
viewport
(视窗)的宽度与高度- 设备的宽度与高度
- 朝向(智能手机横屏,竖屏)
- 分辨率
语法:
@media <media-query-list> {
<group-rule-body>
}
<media-query-list>: not|only mediatype and (expressions)
-
not
: 用来排除掉某些特定的设备的,比如@media not print
(非打印设备)。 -
only
: 用来定某种特别的媒体类型。 -
all
: 所有设备。
@media 规则可置于代码的顶层或位于其它任何@条件规则组内。
/* At the top level of your code */
@media screen and (min-width: 900px) {
article {
padding: 1rem 3rem;
}
}
/* Nested within another conditional at-rule */
@supports (display: flex) {
@media screen and (min-width: 900px) {
article {
display: flex;
}
}
}
多媒体类型
all
,用于所有多媒体类型设备。print
,用于打印机。screen
,用于电脑屏幕,平板,智能手机等。speech
,用于屏幕阅读器。
通过 JS 查询 @media
在 JavaScript
中,可以使用 CSSMediaRuleCSS
对象模型接口访问使用 @media
创建的规则。
这是我们准备的样式表:
main {
width: 1024px;
margin: 0 auto !important;
}
.component {
float: right;
border-left: solid 1px #444;
margin-left: 20px;
}
@media (max-width: 800px) {
body {
line-height: 1.2;
}
.component {
float: none;
margin: 0;
}
}
通过 document.styleSheets[0].cssRules
,可以访问到所有的 CSSrule,其中 type = 4
就是 CSSMediaRule
对象。
使用 JS 创建 @media
在 JavaScript 中,可以使用 matchMedia() 方法创建媒体查询:
window.matchMedia(mediaQueryString);
mediaQueryString
: 必需,一个被用于媒体查询解析的字符串。
matchMedia()
方法返回一个新的 MediaQueryList
对象,表示指定的媒体查询字符串解析后的结果。MediaQueryList
对象有以下两个属性:
media
:查询语句的内容。matches
:用于检测查询结果,如果文档匹配media query
列表,值为true
,否则为false
。
if (window.matchMedia("(max-width: 700px)").matches) {
/* 窗口小于或等于 700 像素 */
document.body.style.backgroundColor = "yellow";
} else {
/*窗口大于 700 像素 */
document.body.style.backgroundColor = "pink";
}