📅 最后修改于: 2023-12-03 15:31:16.736000 🧑 作者: Mango
HTML 媒体查询是一种用于根据设备特性（如屏幕尺寸、分辨率等）自适应页面布局的技术。它可以帮助程序员设计出兼容不同设备的响应式网页。
通过在 HTML 中引用 CSS 样式表，可以在样式表中使用媒体查询。媒体查询根据条件选择性地应用 CSS 样式，从而实现不同设备上的页面布局自适应。
媒体查询的语法如下：
@media mediatype and (condition) {
CSS rules;
}
其中，mediatype 表示媒体类型（如 screen、print 等），condition 表示媒体查询的条件，CSS rules 表示与条件匹配时应用的 CSS 规则。
例如，下面的代码段表示当设备宽度小于或等于 600 像素时，应用与 div 元素相关的 CSS 样式：
@media screen and (max-width: 600px) {
div {
font-size: 16px;
width: 90%;
}
}
可以使用多个媒体查询来适应不同的设备和条件。媒体查询可用于样式表中的任何规则。
媒体查询可以使用多种条件匹配不同的设备特性，在此介绍一些常用的条件：
以下示例代码展示了如何根据设备宽度和高度自适应页面布局：
<!DOCTYPE html>
<html>
<head>
<title>HTML Media Queries</title>
<style>
div {
padding: 10px;
color: #fff;
text-align: center;
font-family: Arial, sans-serif;
}
/* 元素在设备宽度大于 600 像素时应用的 CSS 样式 */
@media screen and (min-width: 600px) {
div {
background-color: #0077ff;
}
}
/* 元素在设备宽度小于等于 600 像素、高度小于等于 400 像素时应用的 CSS 样式 */
@media screen and (max-width: 600px) and (max-height: 400px) {
div {
background-color: #ff7700;
}
}
</style>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>
运行以上代码，可以看到在不同的设备上，元素的背景颜色会根据媒体查询而改变。
HTML 媒体查询是设计响应式网页的重要技术之一。程序员可以使用它来根据不同设备特性自适应页面布局，从而提升用户体验和页面可访问性。