如何将@media 查询放入 HTML？答案

【问题标题】：How can I put @media queries into HTML?如何将@media 查询放入 HTML？
【发布时间】：2018-01-18 22:48:48
【问题描述】：

<body onload="myFunction()" style="margin:0;height:850px">

我怎样才能把@media 查询放在那里？我在 CSS 中尝试过，但它不起作用。我认为如果我把它放在 HTML body 标签中会更容易。

【问题讨论】：

@media 是 css 而不是 html developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/…
你尝试了什么？
@media only screen and (max-width: 1390px) { body { height: 630px; } }
这是因为我的 body 标签中有 overflow-x:hidden 而无法正常工作吗？
请编辑您的问题以添加相关代码，而不是将其作为评论发布

【解决方案1】：

您可以使用style 标签内联css 样式。

<body>
  <style>
    @media only screen and (max-width: 400px) {
     .body {
       background-color: red;
     }
    }
  </style>
</body>

【讨论】：

【解决方案2】：

要使@media 查询正常工作，您需要在头部放置一个<meta> 视口标签，如下所示：

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

如果您这样做，@media 查询应该在单独的 CSS 样式表中或通过 <style> 标签工作。

【讨论】：