我正在使用@media 查询，但我在不同屏幕上编写的代码不起作用答案

【问题标题】：I'm using @media query but the codes I wrote on different screens don't work我正在使用@media 查询，但我在不同屏幕上编写的代码不起作用
【发布时间】：2021-10-29 15:51:45
【问题描述】：

我在这个网站上的第一个问题。对不起，如果我做错了什么

这是我的@media 查询代码；

@media only screen and (min-device-width:992px) and (max-device-width:1199px){
  .container{
    max-width: 100%;
    min-width: 100%;
    width: 100%;
  }
}

我不知道为什么，但它不能在不同的屏幕上工作。

【问题讨论】：

标签： css responsive-design media-queries responsive

【解决方案1】：

我猜你希望它也适用于窗口调整大小，只需将 min-device-width 和 max-device-width 更改为 min-width 和 max-width，它就会按预期工作。这样它的应用取决于窗口宽度，而不是设备宽度。

此外，设备宽度现已弃用：https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width ;)

.container {
  width: 200px;
  height: 20px;
  background-color: red;
}

@media only screen and (min-width:992px) and (max-width:1199px) {
  .container {
    max-width: 100%;
    min-width: 100%;
    width: 100%;
  }
}

&lt;div class="container"&gt;&lt;/div&gt;

【讨论】：

我试过了。但是，我仍然收到错误消息。
你得到什么样的错误？考虑分享您的 HTML 及其相关的 CSS 代码，以便我们检查其他可能造成干扰的因素。
您可以编辑您的主要帖子，并使用相关的 HTML 和 CSS 代码添加一个完整的工作小提琴。这里有一个完整的解释：meta.stackoverflow.com/questions/358992/…