需要響應移動，但在桌面

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沒有固定寬度，並且將展開以填充視口。或者更好的是，美國移動的第一種方法，並且只有當視口縮放超過特定寬度時才定義寬度。

@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特異性保持不變，無論它在媒體查詢是的。所以後者的規則勝出。