The difference between max-device-width and max-width in a responsive Layout,

The difference between max-device-width and max-width in a responsive Layout,

I have studied the CSS of multi-screen adaptation and responsive layout.

First Writing Method

 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 }

 

Method 2

 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 }

 

Differences between max-device-width and max-width

Max-device-width	Max-width
Adapt to the width of the device Screen	Adapt to the display area width
PC Browsers Do not respond when scaling at will	The PC browser will respond when scaling at will
-	Compatible with max-device-width

 

 Page example