CSS @media 语法
在 CSS 中，@media 规则用于根据设备的特征（如屏幕尺寸、设备方向等），动态地应用不同的样式。
语法：
@media 媒体类型 and (媒体特性) {
/* 当条件满足时应用的 CSS 样式 */
}说明：
对于 “媒体类型” 来说，常见的有以下几种（如下表所示）。
| 类型 | 说明 |
|---|---|
| screen | 适用于屏幕设备（如电脑、手机、平板等） |
| 适用于打印设备 | |
| all | 适用于所有设备 |
对于 “媒体特性” 来说，常见的有以下几种。
| 特性 | 说明 |
|---|---|
| width | 视口的宽度 |
| height | 视口的高度 |
| orientation | 设备的方向（例如纵向或横向） |
| min-width | 视口的最小宽度 |
| max-width | 视口的最大宽度 |
我们可以使用 “逻辑运算符” 来组合多个媒体查询：
and：多个条件都满足时才应用样式。or（逗号 ,）：只要满足其中一个条件，就应用样式。not：用于排除某个特定的媒体查询条件。only：确保旧版浏览器不应用某个媒体查询的样式。
在现代浏览器中，我们可以使用更直观的数学符号来编写媒体查询。 比如：@media (max-width: 600px) 可以简写为 @media (width <= 600px)。
提示: 实际上，绿叶网之所以能在 PC 端和移动端会有不同的布局效果，就是使用了 CSS 媒体查询（@media）来实现的。
CSS @media 摘要
| 属于 | CSS 媒体查询 |
|---|---|
| 使用频率 | 高 |
| 是否继承 | 否 |
| 默认值 | 无 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS @media 示例
接下来，我们通过几个简单的例子来讲解一下 CSS @media 规则是如何使用的。
示例 1：@media 根据 “视口宽度” 应用不同样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 默认样式（大于等于 600px） */
body {
background-color: lightgreen;
font-size: 24px;
}
/* 当屏幕尺寸小于 600px 时 */
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
font-size: 16px;
}
}
</style>
</head>
<body>
<h3>绿叶网</h3>
<p>为好教程，全力以赴</p>
</body>
</html>默认情况下，页面效果如下图 1 所示。当屏幕尺寸小于 600 px 时，页面效果如下图 2 所示。
分析：
在这个例子中，我们使用了 @media 规则来根据视口宽度应用不同样式。当视口宽度小于 600px 时，背景会变为浅蓝色，并且字体变小；当宽度大于或等于 600px 时，背景会变为浅绿色，并且字体变大。
提示: 在实际开发中，根据视口宽度应用不同样式，这是 @media 最常见的应用场景。
示例 2：@media 根据 “设备方向” 应用不同布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
.container {
width: 90%;
margin: 20px auto;
border: 2px solid #333;
padding: 10px;
background-color: #f4f4f4;
}
/* 当设备处于纵向模式（高度大于宽度）时 */
@media (orientation: portrait) {
.container {
background-color: #ffe6e6;
}
}
/* 当设备处于横向模式（宽度大于高度）时 */
@media (orientation: landscape) {
.container {
background-color: #e6ffef;
}
}
</style>
</head>
<body>
<div class="container">
<h1>绿叶网</h1>
<p>为好教程，全力以赴。</p>
</div>
</body>
</html>当设备处于纵向模式（高度大于宽度）时，页面效果如下图 1 所示。当设备处于横向模式（宽度大于高度）时，页面效果如下图 2 所示。
分析：
在这个例子中，我们使用了 @media 规则来根据设备（如手机或平板）的横向（landscape）或纵向（portrait）模式来调整布局。
@media (orientation: portrait)：表示在设备处于纵向模式时将 .container 的背景色设置为浅红色。@media (orientation: landscape)：表示在设备处于横向模式时将 .container 的背景色设置为浅绿色。
示例 3：@media 为 “打印设备” 设置特定样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 屏幕显示样式 */
body {
font-family: 'Times New Roman', Times, serif;
color: #333;
}
header, nav, footer {
background-color: #eee;
padding: 10px;
border-bottom: 1px solid #ccc;
}
/* 打印时应用此样式 */
@media print {
nav, footer {
display: none; /* 打印时隐藏导航和页脚 */
}
body {
font-family: Georgia, serif;
font-size: 12pt;
color: #000;
}
a {
text-decoration: none; /* 打印时移除链接下划线 */
color: #000;
}
a[href]:after {
content: " (" attr(href) ")"; /* 在链接后显示URL */
}
}
</style>
</head>
<body>
<header>
<h1>绿叶网</h1>
</header>
<nav>
<ul>
<li><a href="#">教程</a></li>
<li><a href="#">手册</a></li>
<li><a href="#">工具</a></li>
<li><a href="#">课程</a></li>
</ul>
</nav>
<main>
<p>为好教程，全力以赴。</p>
<p>……</p>
<p>……</p>
</main>
<footer>
<p>版权所有 © 2025</p>
</footer>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用了 @media 规则来为打印设备定义特殊的样式，例如移除导航菜单和调整字体以节省墨水。
