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

前端之家收集整理的这篇文章主要介绍了CSS:在一个类中定义媒体查询前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有可能写出类似的东西
.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 */
    } 
}

猜你在找的CSS相关文章