原始网址:http://www.w3schools.com/css/css3_mediaqueries.asp
翻译:
CSS3 媒体类型(CSS3 Media Queries)
CSS2 中介绍的媒体类型(CSS2 Introduced Media Types)
@media 规则出现于 CSS2,这使得对不同媒体类型定义不同样式成为可能。
例如:你可能针对电脑屏幕、打印机、手持设备、电视类设备等等有各自专门的样式规则的设置。
不幸的是,除了打印媒体类型,很多媒体类型都不能受设备的良好支持。
CSS3 介绍媒体查询(CSS3 Introduces Media Queries)
CSS3 中的媒体查询是对 CSS2 媒体类型概念的扩展:以接受设备的性能替代查看设备的类型。
媒体查询可用以检查多个事项,例如:
- 视口的宽高
- 设备的宽高
- 定位(是
tablet/phone in landscape
还是portrait mode
) - 分辨率
使用媒体查询为 tablets、iPhone 以及 Androids 传递定制样式表是很流行的技术。
Browser Support
表格中的数字是第一版全面支持 @media
规则的浏览器。
属性(Property) | ![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|---|
@media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
媒体查询语法(Media Query Syntax)
媒体查询由媒体类型和可包含一个或多个被解析为 true 或 false 的表达式组成。
@media not|only mediatype and (expressions) {
CSS-Code;
}
如果指定的媒体类型与当前呈现文档的设备类型匹配,查询结果为 true,媒体查询内的所有表达式为 true 。当媒体查询为 true 的时候,对应的样式表或样式规则被应用,遵从常规的级联规则。
除非你使用 not
或 only
操作符,否则,媒体类型将是可选的,all 类型将起作用。
对不同的媒体,你也可以有不同的样式表:
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
CSS3 媒体类型(CSS3 Media Types)
值(Value) | 描述(Description) |
---|---|
all | 对所有媒体类型设备可用 |
对打印机可用 | |
screen | 对 computer screens、tablets、smart-phones 等等可用 |
speech | 对能够“朗诵”网页的阅读器可用 |
媒体查询简单示例(Media Queries Simple Examples)
使用媒体查询的方式之一是在你的样式表中有适当可选的 CSS 部分。
下列示例在视口的宽度为 480 个像素或更宽的时候将背景色改为浅绿(当视口的宽度小于 480 像素的时候,背景色为粉色):
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>
</body>
</html>
下列示例在视口的宽度为 480 个像素或更宽的时候以浮动于页面左侧的方式呈现菜单(当视口的宽度小于 480 个像素的时候,菜单位于内容顶部呈现):
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left:216px;}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {
overflow: auto;
}
#main {
margin-left: 4px;
}
#leftsidebar {
float: none;
width: auto;
}
#menulist {
margin: 0;
padding: 0;
}
.menuitem {
background: #CDF0F6;
border: 1px solid #d4d4d4;
border-radius: 4px;
list-style-type: none;
margin: 4px;
padding: 2px;
}
@media screen and (min-width: 480px) {
#leftsidebar {
width: 200px;
float: left;
}
#main {
margin-left: 216px;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div id="leftsidebar">
<ul id="menulist">
<li class="menuitem">Menu-item 1</li>
<li class="menuitem">Menu-item 2</li>
<li class="menuitem">Menu-item 3</li>
<li class="menuitem">Menu-item 4</li>
<li class="menuitem">Menu-item 5</li>
</ul>
</div>
<div id="main">
<h1>Resize the browser window to see the effect!</h1>
<p>
This example shows a menu that will float to the left of the
page if the viewport is 480 pixels wide or wider. If the viewport is
less than 480 pixels, the menu will be on top of the content.
</p>
</div>
</div>
</body>
</html>
CSS3 @media Reference
有关所有媒体类型和特性/表达式的总览,请在 CSS 参照中查看 @media 规则。