响应式布局 max-device-width 与 max-width 的区别

闲来没事，研究了一下多屏适配和响应式布局的 CSS。

第一种写法

 @media screen and (max-device-width: 320px) {

 }

 @media screen and (min-device-width: 321px) and (max-device-width: 640px)  {

 }

 @media screen and (min-device-width: 641px) and (max-device-width: 1000px)  {

 }

第二种写法

 @media screen and (max-device-width: 640px)  {

     @media screen and (max-device-width: 320px) {

     }

     @media screen and (max-device-width: 360px)  {

     }
 }

 @media screen and (min-device-width: 641px) and (max-device-width: 1000px)  {

 }

max-device-width 与 max-width 的区别

max-device-width	max-width
根据设备屏幕的宽度进行适配	根据显示区域的宽度进行适配
PC浏览器随意缩放时不会响应	PC浏览器随意缩放时会响应
-	同时兼容max-device-width

页面示例