css - 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 和不带前缀使用时的 device-width 之间的确切区别是什么？

Answer 1

条件 device-width : 480px 表示设备的宽度正好 480 像素。条件 max-device-width : 480px 表示设备的宽度最多 480 像素，即等于或小于 480 像素。

这可能会造成混淆，但他们想要定义媒体查询语法，以便它使用 CSS 声明的一般语法，即 property: value，而不是例如属性(property) <= 值(value)。因此，您可以将 max-device-width 视为一种伪属性，并将 max-device-width : 480px 理解为“设备宽度最大为 480px”，而不是而不是“最大设备宽度”。