上查看所有课程
CSS 媒体查询是一条 CSS 规则，它允许我们根据用户设备的屏幕尺寸应用不同的样式到网页上。
下图展示了为各种用户设备改变布局的情况。
这些样式是根据用户设备或视口（viewport）的特性来应用的。这些特性可以包括屏幕宽度、高度、方向等。
CSS 的 @media 规则能够创建响应式网页设计。
CSS 媒体查询语法
这是媒体查询的语法。
@media media-type and (media-feature-rule) {
/* CSS rules go here */
}这里，
-
media：指定媒体查询块开始的关键字 -
media-type：指定应用样式的媒体类型；常见的媒体类型包括all、screen、print和speech -
media-feature-rule：定义应用底层 CSS 样式的特定条件，例如宽度、高度或屏幕方向
让我们看一个例子。
@media screen and (min-width: 768px) {
/* CSS styles for screens with a width of 768px or more go here */
}这里，媒体查询针对 screen 的 media_type，并检查 min-width: 768px 的条件。
如果屏幕宽度为 768 像素或更多，将应用其中包含的 CSS 样式。
768px 这个值也称为断点（breakpoint）。
注意： 媒体查询中的断点指的是网站布局发生变化（应用指定样式）时的特定宽度或高度。
示例：使用 CSS 媒体查询创建导航菜单
首先，我们为桌面和笔记本电脑布局创建一个导航菜单。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Navigation Menu</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 100%;
}
header {
height: 80px;
background-color: pink;
display: flex;
align-items: center;
justify-content: flex-end;
}
ul {
list-style-type: none;
display: flex;
margin-right: 20px;
}
ul li {
margin: 0px 6px;
}
a {
display: block;
text-decoration: none;
text-align: center;
font-weight: bold;
background-color: deeppink;
color: black;
border: 1px solid;
padding: 12px 20px;
border-radius: 4px;
font-family: "Courier New", Courier, monospace;
transition: all 0.5s ease;
}
a:hover {
background-color: orange;
color: blue;
}浏览器输出
在上面的示例中，导航菜单在台式机和笔记本电脑上看起来不错。
现在，为了改变移动设备的布局，我们可以使用媒体查询。例如，
@media screen and (max-width: 576px) {
header {
height: auto;
display: block;
padding: 20px 0px;
}
ul {
display: block;
margin-right: 0;
}
ul li {
margin: 6px;
}
}浏览器输出
在上面的示例中，一旦设备宽度达到 576px 的断点，将应用指定的样式，水平导航菜单将过渡为垂直菜单。
这样，媒体查询就能让我们的网站在各种屏幕尺寸上都显得优雅。