html - 需要在移动设备上响应但在桌面上不需要响应

Question

我按照这些步骤使 bootstrap 在桌面上不响应但在移动设备上响应

http://getbootstrap.com/getting-started/#disable-responsive

但它在移动设备上也没有响应。如何让它在移动设备上响应？

  <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->

在我的自定义 CSS 中

@media(max-width:480px) {
  .container {
    width: 480px !important;
  }
}

.container { width: 970px !important; }

HTML

        <div class="row topBlock" id="topBlock">
            <div class="col-xs-5 text-center">
                <div class="marketing" id="download">
                    <div class="col-xs-12" class="download-badges1">
                    </div>
                </div>
            </div>
            <div class="col-xs-7 text-center">
            </div>
       </div>

Answer 1

.container { width: 970px !important; 正在覆盖您的媒体查询。反转选择器并在媒体查询中将宽度设置为 auto;，这样 .container 就没有固定宽度并且会扩展以填充视口(viewport)。

.container { width: 970px; }
@media( max-width: 480px ) {
  .container { width: auto; }
}

或者更好的是，使用移动设备优先的方法，并且仅在视口(viewport)缩放超过特定宽度时才定义宽度。

@media( min-width: 481px ) {
  .container { width: 970px; }
}

div {
  height: 200px;
  margin: 0 auto;
  background-color: rebeccapurple;
}

@media ( min-width: 360px ) {
  div {
    width: 200px;
    background-color: gold;
  }
}

<div></div>

---

很容易认为将选择器包装在媒体查询中会赋予它更高的特异性，但事实并非如此。

@media ( min-width: 360px ) {
  .abc { color: red; }
}
.abc { color: blue; }

金额为:

.abc { color: red; }
.abc { color: blue; }

.abc 将是 blue 因为 .abc 的特殊性保持不变，无论它在媒体查询中。所以后一条规则胜出。