以 * 为媒体查询前缀，例如 *-device-width，是对 @media 规则的有效查询吗？答案

【问题标题】：Is prefixing a media query with *, such as *-device-width, a valid query for the @media rule?以 * 为媒体查询前缀，例如 *-device-width，是对 @media 规则的有效查询吗？
【发布时间】：2016-11-16 06:36:58
【问题描述】：

我们公司的一些网站使用@media 规则，其中查询使用设备宽度，例如

@media (max-device-width:800px) {} //various rules

当我发现this 链接时，我正在搜索我们公司网站的 CSS 以查找任何过时的规则。作者断言星号前缀（例如 *-device-width）可用于媒体查询，并且由于它是 Google 链接，因此此断言必须是正确的：p

我无法使用我当前的设置对此进行测试。我尝试在 W3Schools 及其设置上应用此规则，但它似乎不起作用（尽管有效的查询确实有效）。 @media here 的 MDN 页面没有提及此查询的有效性。 WHATWG 文档（例如 this 一个）和 W3C 文档（例如 this 一个）也没有。

*-device-width 之类的星号前缀是否对媒体查询有效，以使规则同时适用于 max-device-width 和 min-device-width？

【问题讨论】：

从没想过我会这么说，但是 WHATWG 不是 W3C，就像 W3C 讨厌被误认为 W3Schools 一样，WHATWG 也同样讨厌与 W3C 混淆。此外，您链接到的 WHATWG 规范描述了非标准功能 - 如果您想了解 device-width 是否是标准的一部分，您为什么要查看那里？
刚刚在谷歌搜索“device-width”时遇到了它，因为我遇到了我们公司 CSS 的另一个问题 - 使用 @-ms-viewport {width: device-width;}
我也从 MDN 页面中选择了“生活标准”——可以选择这个：drafts.csswg.org/mediaqueries-3/#media0

标签： css media-queries device-width

【解决方案1】：

*-device-width 之类的星号前缀是否对媒体查询有效，以使该规则同时适用于 max-device-width 和 min-device-width？

不，不是。单独引用媒体功能的方法是简单地省略任何前缀。所以在这种情况下它是device-width。请参阅section 4 of Media Queries 3 和section 2.4 of Media Queries 4。

我不知道为什么该 Google 文档的作者提到 *-device-width，而他们本来可以简单地说 device-width——如果我冒险猜测，可能是因为使用了 device-width elsewhere——但在无论如何，星号不是有效的前缀。

【讨论】：