Question

我按照这些步骤使引导程序在桌面上无响应但在移动设备上响应

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没有固定宽度，并将展开以填充视口。

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

或者更好的是，美国是第一种移动方法，只有当视口在某个宽度上缩放时才定义宽度。

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

＆＃13;

div {
  height: 200px;
  margin: 0 auto;
  background-color: rebeccapurple;
}

@media ( min-width: 360px ) {
  div {
    width: 200px;
    background-color: gold;
  }
}

＆＃13;

<div></div>

＆＃13;

很容易认为在媒体查询中包装选择器会使其具有更高的特异性，但它没有。

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

金额：

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

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

需要在移动设备上做出响应但在桌面上无响应

1 个答案: