media query中的條件重疊

　　想必接觸過響應式佈局的朋友對於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中設置的任何一種規則，具體是什麼樣子能夠本身手動嘗試一下。