CSS3媒体查询（Media Queries）是CSS的一个强大功能，它允许你根据设备的特性（如视口宽度、分辨率等）来应用不同的样式。这在创建响应式网站（即能自动适应不同屏幕尺寸和设备的网站）时非常有用。
以下是一个简单的CSS3媒体查询和页面自适应的示例：
首先，我们假设有一个简单的HTML结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>媒体查询示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>我的网站标题</h1>
</header>
<main>
<p>这里有一些内容...</p>
</main>
</body>
</html>
接下来，我们创建一个名为styles.css的CSS文件，并使用媒体查询来定义不同屏幕尺寸下的样式：
/* 默认样式（例如，在桌面浏览器中） */
header {
background-color: lightblue;
text-align: center;
padding: 20px;
}
main p {
font-size: 18px;
line-height: 1.5;
}
/* 当视口宽度小于或等于 768px 时（例如，在平板电脑或较小的桌面浏览器中） */
@media screen and (max-width: 768px) {
header {
padding: 10px;
}
main p {
font-size: 16px;
}
}
/* 当视口宽度小于或等于 480px 时（例如，在智能手机上） */
@media screen and (max-width: 480px) {
header h1 {
font-size: 1.5em;
}
main p {
font-size: 14px;
}
}
在上面的CSS中，我们使用了三个样式块：
- 默认样式：这是在没有媒体查询匹配的情况下应用的样式。
- 第一个媒体查询：当浏览器窗口或设备的视口宽度小于或等于768px时，将应用这些样式。这里我们减小了header的内边距和main段落的字体大小。
- 第二个媒体查询：当浏览器窗口或设备的视口宽度小于或等于480px时，将应用这些样式。这里我们进一步减小了header中h1的字体大小和main段落的字体大小。
通过这种方式，你可以使用CSS3媒体查询来创建自适应不同屏幕尺寸和设备的网站。
浙公网安备 33010602011771号