CSS：在一个类中定义媒体查询

有可能写出这样的东西吗

.global-container
  margin-top: 60px
  background-image: $image-bg
  @media(max-width: 767px)
    margin-top: 0
    background-image: none

因此，我们可以在一个类中定义桌面和移动css

我试过这个，但似乎不起作用

更新： 这实际上是有效的：

---

您应该这样做：

@media all and (max-width: 767px) {
    .global-container {
        margin-top: 0;
        background-image: none;
    }
}

.global-container {
    margin-top: 60px;
    background-image: $image-bg;
    @media (max-width: 767px) {
        /* Your mobile styles here */
    }
    @media (min-width:1025px) {
        /* Your desktop styles here */
    } 
}

body {
    background:green;
    @media (min-width:1000px) {background:red;}
}

如果要以桌面为目标，可以使用：

@media (min-width:1025px) { 
    .global-container {
        margin-top: 0;
        background-image: none;
    }
}

我注意到您正在使用

SASS

，您可以这样做：

@media all and (max-width: 767px) {
    .global-container {
        margin-top: 0;
        background-image: none;
    }
}

.global-container {
    margin-top: 60px;
    background-image: $image-bg;
    @media (max-width: 767px) {
        /* Your mobile styles here */
    }
    @media (min-width:1025px) {
        /* Your desktop styles here */
    } 
}

body {
    background:green;
    @media (min-width:1000px) {background:red;}
}

---

您肯定需要应用某种多媒体查询。代码并不神奇，CSS需要特定的参数来进行这些类型的查询

您可以使用JS，但基于您的用例，不建议使用JS。

这是一个CSS解决方案

@media all and (minmax-width: 0px) and (min-width: 320px), (max-width: 320px) 
    { Insert Code };
}'

它的工作原理是：

.column-1-3 {
  width: 33.3333%;
  @media (max-width: 600px) {
    width: 100%;
  }
}

---

在普通CSS中，答案是否定的。你不能。媒体查询应该始终是一个外壳，包含在该条件下应用的内部

在SASS中，并且更少，但是，它完全有效。任何支持嵌套的卷曲括号的转换器都应该能够将媒体查询移动到外部，因此允许CSS按照上面所述工作。（您可以在编译sass/less文件后检查输出CSS，并看到他们这样做。）

所以，如果你有这样的东西：

@media all and (max-width: 767px) {
    .global-container {
        margin-top: 0;
        background-image: none;
    }
}

.global-container {
    margin-top: 60px;
    background-image: $image-bg;
    @media (max-width: 767px) {
        /* Your mobile styles here */
    }
    @media (min-width:1025px) {
        /* Your desktop styles here */
    } 
}

body {
    background:green;
    @media (min-width:1000px) {background:red;}
}

屏幕在CSS中是绿色的（因为它忽略了body style definition块中奇怪的@media元素），在SASS/LESS中是红色的（因为它得到了您真正想要看到的内容）

确切地说，预处理器将理解上述代码段：

body {
  background: green;
}
@media (min-width: 1000px) {
  body {
    background: red;
  }
}

---

那么，我在哪里可以定义

桌面

行为？因此，我必须键入

.global container

两次，而不是将其不同的行为嵌套在一个地方？@cqcn1991检查我的updatePlease toss

输入到您的代码中…：-/