css - 使用未定义的 CSS 媒体查询

Question

我正在研究 CSS 媒体查询最佳实践并找到了 Foundation's definition .

如您所见，第一个媒体查询没有定义最小/最大大小:

@media only screen { } /* Define mobile styles */

为什么他们使用这个媒体查询，因为它没有定义断点？这是最佳做法还是应该避免？

谢谢!

Answer 1

该特定媒体查询适用于所有屏幕(任何尺寸、方向、纵横比或像素密度)。
screen 是一种媒体类型。无论您在该媒体查询中放入什么，都只会应用于 screen 而不会应用于其他 media_type 的内容。

这是 list of currently recognized values对于 media_type。其中大部分已被弃用。您应该使用的(因为它们可能会留在这里)是:

• all(如果未指定则隐式)
• 屏幕
• 打印
• 演讲

---

Foundation 的人可能应该将该查询后的评论更改为更明确的评论。他们可能应该使用 /* General styles, including mobile */ 而不是 /* Define mobile styles */。

看看他们的媒体查询结构，您会发现它是一个移动设备优先的 CSS 框架。如:您首先定义通用样式(包括移动样式)，然后为越来越宽的屏幕应用异常(exception)。