Question

我在CSS中有这一行：

icons span{
width: 25px;
height: 25px;
margin-left: -3px;

然后

@media (min-width: 1200px){
.icons span{
  margin-left: 6px;
}

现在我想设置margin-left：6px再次宽度991px及以下？在这个例子中我该怎么做？

Answer 1

您可以为css添加更多媒体尝试在媒体之后添加此内容

@media (max-width: 991px){
.os-icons span{
  margin-left: 6px;
}

如果您想使用OR条件，可以使用逗号分隔符指定如下：

@media (min-width: 1200px), (max-width: 991px){
    .os-icons span{
      margin-left: 6px;
     }
 }

Answer 2

您可以将规则与,分开。

 @media (min-width: 1200px), (min-width: 991px){
    .icons span{
      margin-left: 6px;
     }
 }

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries?redirectlocale=en-US&redirectslug=CSS%2FMedia_queries#comma-separated_lists

Answer 3

我不确定我是否明白这一点。您希望6px保证金最高可达991px而-3px最高可达1200px而不是6px再次？如果是这样，我会像下面的CSS那样做。

.icons span {
   width: 25px;
   height: 25px;
   margin-left: 6px;
}

@media (min-width: 991px) {
 .icons span {
    margin-left: -3px;
  }
}


@media (min-width:  1200px){
 .icons span{
    margin-left: 6px;
  }
}

或简称：

@media (min-width: 991px) and (max-width: 1200px) {
 .icons span{
    margin-left: -3px;
  }
}

修改

我为你做了一个演示。查看fiddle

@media有2种不同的分辨率

3 个答案: