媒體查詢層次結構 - 爲什麼在瀏覽器/檢查器中「小型」媒體查詢呈現？

我有幾個媒體的質疑，但有兩個，我試圖用樣式某一個元素：媒體查詢層次結構 - 爲什麼在瀏覽器/檢查器中「小型」媒體查詢呈現？

.navbar-default .navbar-nav>li>a

這裏是我的CSS包括以前媒體查詢：

@media (min-width: 1024px) { 

    .header-column-secondary { 
    width: 13%; 
    } 
} 

@media (min-width: 768px) { 

    #gatewaylogo { 
    height: 85px; 
    padding-left: 0px; 
    padding-top: 10px; 
    } 

    .phone-number { 
    font-family: 'Oswald', sans-serif; 
    color: #ffffff; 
    font-size: 16px; 
    position: relative; 
    } 

    .social-media { 
    color: #ffffff; 
    display: table-cell; 
    padding: 5px 0 5px 5px; 
    transform: translateY(-7%); 
    } 
} 

@media screen and (max-width: 1024px) { 
    .navbar-default .navbar-nav>li>a 
    { 
    font-family: 'Oswald', sans-serif; 
    color: #1B3764; 
    text-transform: uppercase; 
    font-size: 22px; 
    line-height: 100px; 
    margin-right: 60px; 
    padding-left: 0; 
    padding-right: 0; 
    } 
} 

@media screen and (max-width: 768px) { 
    .navbar-default .navbar-nav>li>a { 
    font-family: 'Oswald', sans-serif; 
    color: #1B3764; 
    text-transform: uppercase; 
    font-size: 22px; 
    line-height: 100px; 
    margin-right: 20px; 
    padding-left: 0; 
    padding-right: 0; 
    } 
}

因此，您可以看到適用於.navbar-default .navbar-nav>li>a的媒體查詢是(max-width: 1024px)和(max-width: 768px)

這個想法是，從1024px - 769px，我想.navbar-default .navbar-nav>li>a得到margin-right: 60px，並在768px，平板大小，我想.navbar-default .navbar-nav>li>a得到margin-right: 20px。我計劃在瀏覽器寬度變小時繼續添加媒體查詢 - 475px，375px和320px。

那麼爲什麼，在768px，媒體查詢不渲染？看起來，1024像素的媒體查詢仍然獲得了風格並覆蓋了它。我不想添加!importants，因爲那樣我會繼續將!importants一直添加到320px。

我喜歡從桌面設計到移動設備，而不是先移動設備。有什麼建議麼？該網站是住在這裏：http://nowordpress.gatewaywebdesign.com/

感謝

來源

2017-05-18 HappyHands31

有這個問題，2個問題：

視定義缺失
都min-width和max-width需要被定義爲得到媒體查詢在這種情況下工作。

下面是一些詳細的解釋：

有一個在媒體查詢沒有rule_override_based_on_min/MAX_WIDTH。也就是說，如果有兩個媒體查詢規則集，一個是(max-width: 1024px)，另一個是(max-width: 768px)，則不能保證(max-width: 768px)中的規則將覆蓋(max-width: 1024px)中的規則 - 當兩個不同媒體查詢規則集內的兩個規則之間發生衝突時，這是CSS獲勝後期出現的那個。這就是爲什麼你需要min-width和max-width進行媒體查詢。

下面是一個簡單的例子：雖然(max-width: 5000px)是一個更合理的規則生效，但最終的背景顏色是粉紅色。

@media (max-width: 5000px) { 
 
    .testd { 
 
     background: yellow; 
 
    } 
 
} 
 

 
@media (max-width: 100000px) { 
 
    .testd { 
 
     background: pink; 
 
    } 
 
}

<div class="testd">DDD</div>

大衛是正確的，視定義缺失。沒有它，由於像素比例，媒體查詢是不可能的。

來源

2017-05-18 03:38:21 shaochuancs

我想你需要一個媒體查詢是這樣的：

@media (min-width: 768px) and (max-width: 1024px)

來源

2017-05-18 02:16:32 DonO

如果你檢查/css/style.css，你會看到我現在擁有的 - 它仍然無法工作。 – HappyHands31

你缺少你頁面的頭部視meta標籤，添加類似如下：

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

祝你好運！

來源

2017-05-18 03:20:47

媒體查詢層次結構 - 爲什麼在瀏覽器/檢查器中「小型」媒體查詢呈現？

回答

相關問題