css - CSS:在一个类中定义媒体查询

Closed. This question is not reproducible or was caused by typos。它当前不接受答案。












想改善这个问题吗？更新问题，以便将其作为on-topic用于堆栈溢出。

4年前关闭。



Improve this 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/

最佳答案

您应该这样做:

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