在 HTML 中使用媒体查询可以实现响应式设计，使网页可以根据不同的设备屏幕尺寸和设备类型，自动调整布局和样式。媒体查询可以通过 CSS 的@media规则实现。
在 HTML 中，我们需要先在
标签中添加一个标签，用于设置viewport的宽度：<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>其中，width=device-width表示viewport的宽度应该等于设备的宽度，initial-scale=1.0表示初始缩放比例为1。
接下来，我们可以在CSS样式表中使用@media规则，来定义不同的媒体类型和媒体特性。例如，我们可以定义一个针对手机设备的媒体查询，使其在屏幕宽度小于等于768像素时生效：
@media only screen and (max-width: 768px) {
/* 在这里写手机设备的样式 */
}其中，@media表示媒体查询规则，only screen表示只在屏幕上应用，(max-width: 768px)表示屏幕宽度小于等于768像素时生效。
除了max-width，还有一些其他的媒体特性可以使用，例如min-width、orientation等，可以根据需要进行选择和组合。
最后，我们需要将媒体查询和样式表结合起来，以实现响应式设计：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 定义桌面设备的样式 */
h1 {
font-size: 36px;
}
/* 定义手机设备的样式 */
@media only screen and (max-width: 768px) {
h1 {
font-size: 24px;
}
}
</style>
</head>在这个例子中，我们定义了一个针对桌面设备的样式和一个针对手机设备的样式，当屏幕宽度小于等于768像素时，将自动应用手机设备的样式。
通过媒体查询，在HTML中实现响应式设计，可以为用户提供更好的浏览体验，同时也提高了网页的可用性和可访问性。