我的css中的一些媒體查詢被忽略

我有以下css。第一個'4欄'媒體查詢工作，其餘的被忽略。如果我在'1-column'之前放置'5-column'，那麼'1-column'可以工作，但'1,6和7被忽略。如果我把6以上的工作，但1和5被忽略。無論我把它放在哪裏，2,3和4列都可以繼續工作。我沒有看到問題。我希望任何人都可以幫助我。我的css中的一些媒體查詢被忽略

#header-wrap { 
    border-bottom: 1px solid #EFEFEF; 
    margin: 32px 32px 16px; 
    padding: 0 0 32px; 
} 

/* 1 column */ 
@media all and (max-width: 607px) { 
    #header-wrap { 
    width: 256px; 
    } 
} 

/* 2 columns */ 
@media all and (min-width:607px) and (max-width:895px) { 
    #header-wrap { 
    width: 544px; 
    } 
} 

/* 3 columns */ 
@media all and (min-width:895px) and (max-width:1183px) { 
    #header-wrap { 
    width: 832px; 
    } 
} 

/* 4 columns */ 
@media all and (min-width:1183px) and (max-width:1471px) { 
    #header-wrap { 
    width: 1120px; 
    } 
} 

/* 5 columns */ 
@media all and (min-width:1471px) and (max-width:1759px) { 
    #header-wrap { 
    width: 1408px; 
    } 
} 

/* 6 columns */ 
@media all and (min-width:1759px) and (max-width:2062px) { 
    #header-wrap { 
    width: 1696px; 
    } 
} 

/* 7 columns */ 
@media all and (min-width:2062px) { 
    #header-wrap { 
    width: 1696px; 
    } 
}

來源

2014-02-26 silly putty

崑崙請您發表您的HTML代碼？ – Pugazh

我複製你的代碼，實際上它不會啓動從第五媒體查詢的CSS，採用clases而不是ID的沒有工作，我嘗試了幾件事情，但沒有工作，我會如果有人知道是有趣的這種行爲。 – Zagen

這是HTML：

<！ - 標題 - 包裝 - > –

得到它的工作here

出於某種原因，有以下一些您的交易方括號的點。不知道他們來自哪裏。

我也下調媒體查詢，以用更少的代碼相同的效果。鬆散地說，瞄準屏幕有三種主要方法。你可以讓你的風格：

風格倒例如(min-width:320px)，所以一切下到大小
風格了(max-width:480px)，一切高達到大小
支架(min-width:320px) and (max-width:480px)

你有什麼就有什麼包圍，在那裏，而不是允許範圍內的樣式媒體查詢級聯即1200像素寬屏幕符合(min-width:600px)和(min-width:1000px)所以你只需要應用樣式的下限值的查詢，你必須根據特定括號分辨率重新應用樣式，如(min-width:600px) and (max-width:800px)。

這是一個完全合法的技術，但你會發現你最終得到了更多的代碼，以保持如果曾經需要的任何變化。我很難學會這一點。 CSS旨在級聯，而媒體查詢是相同的。

最後，如果你打算使用支架的辦法，儘量避免指定相同分辨率的兩倍

即(min-width:320px) and (max-width:500px)然後(min-width:500px) and (max-width:900px)

，因爲這可能會混淆一些瀏覽器或導致調整屏幕時閃爍，因爲有一個像素符合這兩個條件。安全的方式來寫這將是：

`(min-width:320px) and (max-width:500px)`

然後(min-width:501px) and (max-width:900px)

做不到這一點，造型上下完全消除這種可能性:)

來源

2014-02-27 11:16:58 Timmah

哇你的答案和解釋的感謝！你看到點的地方，我看到空格（所以我沒有看到它們）。 –

我的css中的一些媒體查詢被忽略

回答

相關問題