使用未定义的CSS媒体查询

Question

我正在研究CSS媒体查询最佳做法，并找到了Foundation's definition。

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

  

@media only screen {} / *定义移动样式* /

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

谢谢！

Answer 1

媒体查询不仅适用于断点。您可以指定输出媒体，如screen。在这种情况下，仅针对显示屏幕。您还可以仅定位print媒体或具有特定方向或分辨率的媒体。

在MDN或w3schools上查看有关媒体查询和媒体类型的详细信息。

Answer 2

该特定媒体查询适用于所有screen（任何大小，方向，宽高比或像素密度）。
screen是媒体类型。无论您在媒体查询中添加什么内容，都只适用于screen，不适用于其他media_type的内容。

以下是media_type的{​​{3}}。他们中的大多数已被弃用。你应该使用的（因为他们可能会留下来）是：

• all（如果没有指定则隐含）
• screen
• print
• speech

基金会的人可能应该在该查询之后将评论更改为更明确的评论。他们应该使用/* Define mobile styles */代替/* General styles, including mobile */。

查看其媒体查询的结构，您会发现它是移动优先的CSS框架。如下所示：首先定义一般样式（包括移动设备），然后为越来越宽的屏幕应用例外。