Question

我使用Bootstrap进行大量媒体查询以进行响应式设计。对于给定的div，我开始使用bootstrap＆＃39; col来设置宽度和边距：

<div class="col-xs-6 col-xs-offset-3" id="special">

但在某些情况下，仅在某些情况下，我想进一步添加自己的样式，如下所示：

@media only screen and (orientation:landscape) and (min-width : 320px) {
  .special {
    width:40%;
  }
}

@media only screen and (orientation:landscape) and (min-width : 768px) {
  .special {
    width:"go back to using bootstrap col";
  }
}

从上面可以看出，我的问题是，随着媒体查询的建立，在下一个尺寸上，我不知道怎么说...回到使用bootstrap col。我尝试了width:auto和width:initial，但这些都不起作用

Answer 1

将它们合并为一个媒体规则

@media only screen and (orientation:landscape) and (min-width : 320px) and (max-width : 768px) {
  .special {
    width:40%;
  }
}

Answer 2

像这样： @media only屏幕和（min-device-width：320px）和（max-device-height：768px）和（orientation：landscape）

Answer 3

在使用网格系统时更改维度通常是一个坏主意，因为所有网格系统都是为其构建的。

仅仅通过阅读您的示例有点不清楚，因为您的代码中有几个条件：

宽度＆gt; 320
宽度＆gt; 768
宽度在320~768之间
orientation is landscape
方向不是风景

但是，媒体查询是您的选择器的附加表达式，如果您没有指定其他选项，它将使用您已有的内容。所以例如

/* from bootstrap */
.col-xs-6 {
  width: 10 % ;
}

/* your override */
@media only screen and(orientation: landscape) and(max-width: 768px) {
  #special {
    width: 40%;
  }
}

通过应用这个，当设备是横向+宽度小于768px时，div将具有40％的宽度（抱歉，我不能通过阅读您的代码告诉您的意图），它使用col-xs-6或col -xs-offset-3否则。

CSS宽度：最初由bootstrap设置？

3 个答案: