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

Posted 2023-03-06

【中文标题】我正在使用@media 查询，但我在不同屏幕上编写的代码不起作用

【英文标题】：I'm using @media query but the codes I wrote on different screens don't work

【发布时间】：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%;
  

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

【参考方案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%;
  

<div class="container"></div>

【讨论】：

我试过了。但是，我仍然收到错误消息。

你得到什么样的错误？考虑分享您的 html 及其相关的 CSS 代码，以便我们检查其他可能造成干扰的因素。

您可以编辑您的主要帖子，并使用相关的 HTML 和 CSS 代码添加一个完整的工作小提琴。这里有一个完整的解释：meta.***.com/questions/358992/…