響應式佈局 max-device-width 與 max-width 的區別

閑來沒事，研究了一下多屏適配和響應式佈局的 CSS。

第一種寫法

 1 @media screen and (max-device-width: 320px) {
 2 
 3 }
 4 
 5 @media screen and (min-device-width: 321px) and (max-device-width: 640px)  {
 6 
 7 }
 8 
 9 @media screen and (min-device-width: 641px) and (max-device-width: 1000px)  {
10 
11 }

第二種寫法

 1 @media screen and (max-device-width: 640px)  {
 2     
 3     @media screen and (max-device-width: 320px) {
 4         
 5     }
 6     
 7     @media screen and (max-device-width: 360px)  {
 8        
 9     }
10 }
11 
12 @media screen and (min-device-width: 641px) and (max-device-width: 1000px)  {
13 
14 }

max-device-width 與 max-width 的區別

 頁面示例