device-width和max-device-with有什么区别？

Question

据W3C The ‘device-width’ media feature describes the width of the rendering surface of the output device.介绍

@media all and (max-device-width : 480px)
@media all and (device-width : 480px)

这两者之间有什么区别吗？

如果device-width是渲染面的宽度，为什么会有max-device-width？

max-device-width/min-device-width是设备的最大/最小可能宽度，

那么，在没有前缀的情况下，device-width和设备宽度的确切区别是什么呢？

Answer 1

条件device-width : 480px意味着设备的宽度恰好是480像素。条件max-device-width : 480px表示设备的宽度最多为480像素，即480像素或更少。

这可能会令人困惑，但他们希望定义媒体查询语法，以便它使用CSS声明的通用语法，即属性:值，而不是例如属性<=值。因此，您可以将max-device-width视为一种伪属性，并将max-device-width : 480px理解为“设备宽度最大为480px”，而不是“最大设备宽度”。