media query中的條件重疊

標籤：使用   sp   div   on   問題   bs   size   應用   res   

　　想必接觸過響應式布局的朋友對於media query都不會陌生，響應式布局也正是通過這個關鍵的屬性來實現的。一些響應式布局的教程中通常都會進行如下類似設定來實現不同視口寬度條件下的布局樣本：

@media screen and (max-width:600px){/* 樣式一 */}

@media screen and (min-width:600px) and (max-width:960px){/* 樣式二 */}

@media screen and (min-width:960px){/* 樣式三 */}

　　根據這些教程的解釋，這種設定的效果是：當視口寬度小於等於600px時，應用樣式一；當視口寬度大於等於600px且小於等於960px時，應用樣式二；當視口寬度大於等於960px時，應用樣式三。粗看上去沒有問題，根據不同視口寬度設定了三種樣式效果，但是細看的話問題就來了。上面在描述視口寬度時，都使用了“等於”這個邏輯關係。如果只針對一條規則就沒什麼好說的了，但600px和960px這兩個值都同時滿足了兩條規則，即滿足第一條規則的小於等於600px，又滿足第二條規則的大於等於600px，這樣便產生了條件重疊的問題。那麼當視窗的寬度正好處於600px或960px這種處於分界位置的值的時候，會是怎樣呢？

　　我們可以進行一個簡單的實驗，demo很簡單，實現的效果是一個<div>在上述三種像素範圍內的顏色切換，重點觀察瀏覽器視口寬度在600px和960px像素時<div>的顏色到底受哪個media query設定的影響。瀏覽器寬度採用手動展開表單的方式進行調整，綁定window對象的onresize事件以在console視窗中輸出當前的視窗寬度值。

　　通過上述實驗發現，當瀏覽器寬度值為600px時，其效果還是停留在樣式一的效果上。當寬度調整為601px時，其會變成樣式二的效果。也就是說，當一個值作為一個條件的上限的同時又作為另一個條件的下限時，其對於下限條件而言並不包含等於的關係。同理，對於樣式三的min-width:960px而言，其含義也是在大於960px的情況下，並不包含等於960px的情況。

　　還有一種情況，比如我們想在不同的視口寬度下改變網頁元素的布局，比如將橫向排列改為縱向排列。當這種頁面處於600px或960px這種分界值時，頁面元素的排列不會符合css中設定的任何一種規則，具體是什麼樣子可以自己手動嘗試一下。

 

media query中的條件重疊