我按照这些步骤使 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>
最佳答案
.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
的特殊性保持不变,无论它在媒体查询中。所以后一条规则胜出。
关于html - 需要在移动设备上响应但在桌面上不需要响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44663761/