如何将@media查询放入HTML？

@media查询是一种CSS技术，用于根据设备的特性和屏幕尺寸来应用不同的样式规则。它可以帮助开发人员在不同的设备上提供最佳的用户体验。

要将@media查询放入HTML中，可以通过在HTML文档的<head>标签内使用<style>标签来实现。在<style>标签中，可以使用@media规则来定义不同的样式规则。

下面是一个示例，展示了如何将@media查询放入HTML中：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Media Query Example</title>
  <style>
    /* 默认样式 */
    p {
      color: black;
    }

    /* 在屏幕宽度小于600px时应用的样式 */
    @media (max-width: 600px) {
      p {
        color: red;
      }
    }

    /* 在屏幕宽度大于600px时应用的样式 */
    @media (min-width: 601px) {
      p {
        color: blue;
      }
    }
  </style>
</head>
<body>
  <p>This is a paragraph with different styles based on screen width.</p>
</body>
</html>

在上面的示例中，我们定义了三个样式规则：默认样式为黑色字体，当屏幕宽度小于600px时，段落文本颜色为红色，当屏幕宽度大于600px时，段落文本颜色为蓝色。

这样，根据不同的屏幕宽度，段落的颜色将会有所变化。

腾讯云相关产品和产品介绍链接地址：