max-device-width和max-width的区别表现在如下几个方面：
1. max-device-width是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。
2. max-width是目标显示区域的宽度，例如，浏览器宽度。
3. 如果使用max-device-width，那么在PC浏览器上浏览网页时，缩小或放大浏览器时是不执行CSS的，因为“PC设备”没有变化。但如果使用max-width，缩小或放大浏览器时是执行CSS的，因为“显示区域”即浏览器大小发生了变化。
4. 如果使用max-device-width，那么当手机由竖变横时，CSS是不执行的，因为“手机宽度”并没有变化。如果使用max-width，那么当手机由竖变横时，CSS是执行的，因为“显示区域”发生了变化。
5. 通常，面向“移动设备”用户使用max-device-width；面向“PC设备”用户使用max-width。
例：
/* #### 移动设备 #### */
@media screen and (max-device- 480px){
/* CSS 代码 */
}
/* #### PC #### */
@media screen and (max- 1024px){
/* CSS 代码 */
}
实例分析
下面是两段css代码
代码1：
@media(max-device-960px)
{
/* CSS 代码 */
｝
代码2：
@media(max-960px)
{
/* CSS 代码 */
｝
现在在PC机上打开网页，用Firefox浏览器，把浏览器缩小到宽度为385px。
使用max-device-width的结果
使用max-device-width时，网页不会随浏览器缩小而自适应变化。
使用max-width的结果
使用max-width后，网页随浏览器缩小而发生自适应变化