css @media min-width max-width 解釋

@media 注意事項
寫作順序問題
這簡直是個小技巧，一開始我也十分納悶。為什么寫的有些 @media 沒有起作用。原來有這么回事：

我們知道
min-width 表示最小即大於等於
max-width 表示最大即小於等於
但我們也很清楚 CSS 樣式 跟 DOM 結構 跟 JS 一樣 從前往后加載，后面重復代碼會覆蓋之前代碼。

那么這樣的順序有問題嗎？

/*樣式1*/
@media (min-width: 320px) {
  .container{ width: 92%; margin: 4%; }
}
 
 
/*樣式2*/
@media (min-width:320px) and (max-width: 640px){
  .container{ width: 86%; margin: 7%; }
}
 
 
/*樣式3*/
@media (max-width: 640px) {
  .container{ width: 80%; margin: 10%; }
}

會發生什么？

當 device-width <= 640 時 樣式3 起作用

當 640 <= device-width <= 321 時 樣式2 起作用但無效

當 device-width >= 640 時 樣式1 起作用

min-width：320px 即 width >= 320px

max-width: 640px and min-width: 32px 即 640 <= width <= 320px

max-width: 640px 即 width <= 640px