Question

所以我想尝试这样的事情：

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

但由于某种原因无效。有什么方法可以实现这个目标吗？

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

Answer 1

问题是您试图在类中设置media queries。

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

要了解有关media-queries的更多信息，请查看its documentation

.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是一种规则。 CSS规则可以嵌套在@media中。但是在CSS规则$media或任何其他规则中，不能以语法有效的方式嵌套，因此，如果这样做，则将其忽略。

参考：

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%;
      }
    }

CSS类中的媒体查询

5 个答案: