需要响应移动，但在桌面

没有响应我按照这些步骤进行引导的桌面不响应，但在移动需要响应移动，但在桌面

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>

来源

2017-06-20 GJain

没有*“在移动设备上响应并且在桌面上不响应”*。如果它适应设备宽度，它是响应式的。如果它坏了（开发一个水平滚动条），它没有响应。我相信你的问题的真正答案在于你告诉我们你的理解*“在桌面上不响应”*。如果您的意思是“桌面全宽”，请用'container-fluid'替换'container'类。 –

.container { width: 970px !important; }是压倒你的媒体查询。反转选择器并在媒体查询中将宽度设置为auto;，因此.container没有固定宽度，并且将展开以填充视口。或者更好的是，美国移动的第一种方法，并且只有当视口缩放超过特定宽度时才定义宽度。

@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特异性保持不变，无论它在媒体查询是的。所以后者的规则胜出。

来源

2017-06-20 22:17:05 hungerstar

这确实解决了我的代码中的一个错误。但我原来的问题依然存在。我需要在移动设备上进行响应，但在桌面上无响应。通过上面的更改，宽度固定为480px，但不会在移动设备上进行流体布局。 – GJain

然后它需要970px。如何在媒体查询中覆盖970像素到无宽度。 – GJain

@ user2384694请参阅更新。 – hungerstar

需要响应移动，但在桌面

回答

相关问题