@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 起作用
Question3： 爲什麼上面代碼不起起作用但無效？

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

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

max-width: 640px 即 width <= 640px
Answer3：根據 CSS 從上至下執行的規律以及我們的分析：

當視窗寬度大於等於 320px 時候執行樣式1，（有效）

當視窗寬度小於等於 640px 大於等於 320px 時執行樣式2，有效但無法使用，因爲被 樣式3 覆蓋。（ CSS 解析器跟 JS 一樣在相同方法上覆蓋之前定義的方法 ）

當視窗寬度小於等於 640px 時執行樣式3。（有效）

解決辦法：

調整順序並適當修改，

當 width <= 320px 時，執行 樣式1;

當 640px <= width <= 321px 時，執行 樣式2；(給 min-wdith 的值 +1px 以讓 devic-width 值等於320時 樣式2 不會覆蓋 樣式1)

當 width >= 641px 時，執行 樣式3；

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