媒體查詢最小寬度不起作用

我正在使用媒體查詢，無論瀏覽器是低於還是超過1200px，css總是檢測到我的瀏覽器最小寬度是768px.so因此瀏覽器中的顯示總是750px。媒體查詢最小寬度不起作用

也許這是一個簡單的問題，但它困擾了我幾個小時。

我的HTML：

<div class="header_1"> 
      <div class="logo_1"> 
       <a href="Learn.html"> 
        <img src="img/logo.svg"> 
       </a> 
      </div> 
      <div class="sign_in"> 
       <ul class="sign_list_1"> 
        <li>Pricing</li> 
        <li>Sign in</li> 
       </ul> 
      </div> 
</div> 

My CSS: 
@media (min-width: 1200px){ 
    .header_1{ 
     width: 1170px; 
    } 
} 

@media (min-width: 992px){ 
.header_1{ 
    width:970px;} 
} 

@media (min-width: 768px){ 
.header_1{ 
     width: 750px; 
    } 
}

來源

2017-02-27 CHANG.T

這個問題是http://stackoverflow.com/questions/10306670/css-specificity-的副本媒體查詢和最小寬度 – Kylos

嘗試扭轉你的媒體查詢的順序。最後一條規則（768px）優先於其他規則，因爲它是最後一條並且與其他規則相同。

來源

2017-02-27 23:13:34 Kylos

它的工作原理！感謝您的回答 –

您正在匹配上次查詢的任何內容。如果您明確瞭解媒體查詢，這會變得更容易 - 使用和運算符，因此順序並不重要。

例如，對於小波段： (min-width: 768px) and (max-width: 991px)

所以這個媒體僅適用於768px和991px之間的寬度。

您可以將此權限應用到下一個樂隊下方的像素。對於頂級樂隊，你不需要最大寬度。

來源

2017-02-27 23:16:33

它的工作原理！謝謝！！！！ –

在HTML <head>添加

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

使用max-width而不是min-width

@media all and (max-width: 1200px) { 
    /* Your CSS Rules */ 
} 

@media all and (max-width: 992px) { 
    /* Your CSS rules */ 
} 

@media all and (max-width: 768px) { 
    /* Your CSS rules */ 
}

來源

2017-02-27 23:27:08

媒體查詢最小寬度不起作用

回答

相關問題