CSS：在一个类中定义媒体查询[关闭]答案

【问题标题】：CSS: define media query within one class [closed]CSS：在一个类中定义媒体查询[关闭]
【发布时间】：2014-02-14 22:11:20
【问题描述】：

是否可以写成类似的东西

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

【问题讨论】：

请把; 扔进你的代码... :-/

标签： css sass

【解决方案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 */
    } 
}

【讨论】：

那么我在哪里可以定义desktop 行为？
那么，我必须输入两次.global-container，而不是将其不同的行为嵌套在一个地方？
@cqcn1991 查看我的更新
SASS 语法正是我想要的，谢谢。

【解决方案2】：

在纯 CSS 中，答案是否定的。你不能。媒体查询应该始终是一个外壳，将内部包裹起来以在该条件下应用。

然而，在 SASS 和 LESS 中，它是完全有效的。 任何支持嵌套大括号的转换器都应该能够将媒体查询移到外部，从而允许 CSS 像上面所说的那样工作。（你可以在编译 sass/less 文件后检查输出的 CSS 并查看它们。）

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

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

屏幕在 CSS 中是绿色的（因为它忽略了 body 样式定义块中奇怪的 @media 东西），在 SASS/LESS 中是红色的（因为它得到了你真正想要看到的东西）。

准确地说，预处理器会将上面的 sn-p 理解为：

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

【讨论】：

【解决方案3】：

您肯定需要应用某种多重媒体查询。代码并不神奇，而且 CSS 需要针对这些类型的查询使用特定的参数。

您可以使用 JS，但根据您的用例不建议这样做。

这是一个CSS解决方案

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

【讨论】：

【解决方案4】：

有效：

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

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

【讨论】：