CSS 类中的媒体查询

Question

所以我正在尝试做这样的事情：

.myClass
{
    @media all (max-width: 1024px) {
        left: 33%;
    }
    @media all (min-width:1025px) {
        left: 25%;
    } 
}

但由于某种原因不起作用。有什么办法可以实现这个目标吗？

编辑：我知道你可以通过将媒体查询放在外面来实现这一点，但我不想这样做=(

Answer 1

问题是你试图在类中设置

media queries

。

您必须将它们设置在任何类之外，并且在查询内您可以覆盖要在不同视图上更改的类。

要了解更多关于

media-queries

的信息，请查看其文档

.myClass
{
   // default style
}

@media all (max-width: 1024px)
{
    .myClass {
        left: 33%;
    }
}

@media all (min-width:1025px) {
    .myClass {
        left: 25%;
    } 
}

Answer 2

问题的核心在于CSS语句的语法。 CSS中有两种声明：

• CSS 规则（即规则集）
• 规则

@media

是一种 at 规则。 CSS 规则可以嵌套在

@media

内。但是在 CSS 规则

$media

或任何其他 at 规则中不能以语法上有效的方式嵌套，因此如果这样做，它将被忽略。

参考资料：

• https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax#CSS_statements
• https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule

Answer 3

认为你应该使用

 @media all (max-width: 1024px) {
     .myClass  {
        left: 33%;
      }
 }

@media all (min-width:1025px) {
     .myClass  {
        left: 25%;
      }
}

Answer 4

此语法在 CSS 中无效。你应该使用：

@media all (max-width: 1024px) {
    .myClass{
        left: 33%;
    }
}
@media all (min-width:1025px) {
    .myClass{
        left: 25%;
    }
} 

Answer 5

您可以尝试以下操作吗：

   @media (max-width: 1024px) {
      .myClass {
        left: 33%;
      }
    }

    @media (min-width: 1025px) {
      .myClass {
        left: 25%;
      }
    }

Answer 6

这是一个旧线程，但显然在 2024 年，您可以将媒体查询嵌套在 CSS 类中，而无需使用 SASS。

在这里您可以找到一个示例：https://css-tip.com/better-modern-css/

无论如何，我仍在考虑哪些浏览器支持它。

干杯