CSS：在一类中定义媒体查询 [英] CSS: define media query within one class

问题描述

是否可以写出类似

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

所以我们可以在一个类中定义台式机和移动CSS

So we can define the desktop and mobile css within a class

这样，但似乎不起作用

更新：
这实际上是有效的：
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;
    }
}

如果要定位台式机，可以使用：

If you want to target desktop, you can use:

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

我只是注意到您使用的是 SASS ，您可以这样操作：

I just notice you're using SASS, you can do like this:

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

这篇关于CSS：在一类中定义媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！