css - 设备宽度和最大设备有什么区别？

Question

根据 W3C的“设备宽度”媒体特征描述了输出设备的渲染表面的宽度。

@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 声明的一般语法，即property : value，而不是例如property <= value。因此，您可以将其max-device-width视为一种伪属性，并将其解读max-device-width : 480px为“设备宽度最大为 480 像素”，而不是“最大设备宽度”。