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