Question

是否可以编写类似

的内容

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

因此我们可以在一个类

中定义桌面和移动css

我试过这个，但似乎无法正常工作

更新：这实际上是有效的： http://css-tricks.com/media-queries-sass-3-2-and-codekit/

Answer 1

你应该这样做：

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

如果您想要定位桌面，可以使用：

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

我只是注意到你正在使用SASS，你可以这样做：

.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 */
    } 
}

Answer 2

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

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

所以，如果你有这样的事情：

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

CSS中的屏幕是绿色的（因为它忽略了体型定义块内部那种奇怪的@media事物）而在SASS / LESS中是红色的（因为它得到了你真正喜欢看的东西）。

确切地说，预处理器会将上面的代码段理解为：

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

Answer 3

您必须应用某种多媒体查询。代码不是魔术，CSS需要特定的参数用于那些类型的查询。

您可以使用JS，但不建议根据您的使用情况。

这是 CSS解决方案

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

Answer 4

有效：

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

http://css-tricks.com/media-queries-sass-3-2-and-codekit/

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

4 个答案: