CSS媒体类型

1.1媒体查询语法

媒体查询由一种媒体类型组成，并可包含一个或多个表达式，这些表达式可以解析为 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">

1.2媒体查询的简单实例

使用媒体查询的一种方法是在样式表内有一个备用的 CSS 部分。
下面的例子在视口宽度为 480 像素或更宽时将背景颜色更改为浅绿色（如果视口小于 480 像素，则背景颜色会是粉色）：

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

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

#leftsidebar { width: 100%; float: none; }
#main { margin-left: 0; }
@media screen and (min-width: 480px) {
#leftsidebar { width: 200px; float: left; }
#main { margin-left: 216px; }
}

1.3菜单的媒体查询

使用媒体查询来创建响应式导航菜单，该菜单在不同的屏幕尺寸上会有所不同。

大型屏幕：

 小型屏幕：

 核心代码：

.
topnav {
overflow: hidden;
background-color: #dddddd;
}
.
topnav a {
color: #333333;
line-height: 50px;
float: left;
display: block;
text-align: center;
padding: 0 16px;
text-decoration: none;
}
.
topnav a.on {
color: white;
background-color: darkcyan;
}
@media screen and (max-width: 600px) {
.
topnav a {
text-align: left;
line-height: 40px;
float: none;
width: 100%;
}
}

1.4列的媒体查询

媒体查询的常见用法是创建弹性布局。在本例中，我们创建了一个布局，该布局在四列、两列和全宽列之间变化，具体取决于不同的屏幕尺寸：

大型屏幕：

 中等屏幕：

小型屏幕： 

核心代码：

.
column {
width: calc(25% - 20px);
float: left;
color: white;
font-size: 30px;
line-height: 50px;
text-align: center;
background-color: lightgray;
margin: 0 10px;
}
@media screen and (max-width: 992px) {
.
column {
width: calc(50% - 20px);
}
}
@media screen and (max-width: 600px) {
.
column {
width: 100%;
}
}