使用未定义的CSS媒体查询

我在研究有关CSS媒体查询的最佳做法，并找到了Foundation's definition。使用未定义的CSS媒体查询

正如你所看到的，第一媒体查询有没有最小/最大尺寸的定义：

@media只有屏幕{}/*定义移动样式*/

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

谢谢！

它只针对'screen'（显示）而不是其他媒体，如'print'。宽度和高度不是媒体查询所使用的唯一事物。 – Turnip

它为什么需要断点？这只是说屏幕而不是打印。在这些例子中，他们正在执行* mobile first *，因此断点会显示为*更大*的屏幕大小。 – jonrsharpe

感谢您的评论家伙！是啊，你说得对。我只是想知道，在开发响应式网站时，一般CSS（即用于每种屏幕尺寸的规则）应该在媒体查询之外，还是在媒体查询之外，如基金会使用的媒体查询 - 不含屏幕尺寸规格的媒体查询。那么在这种情况下，可能只是组织/偏好的问题。 –

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

这是media_type的list of currently recognized values。他们中的大多数已被弃用。你应该使用（因为它们很可能是在这里留下来）的有：

在基金会的家伙可能应该将该查询后的评论更改为更多的e xplicit之一。他们应该可能使用/* General styles, including mobile */而不是/* Define mobile styles */。

看看他们的媒体查询的结构，你会注意到它是一个移动优先CSS框架。如：您首先定义一般样式（包括移动设备），并将越来越多的屏幕应用于例外。

2016-10-01 14:13:09

媒体查询不仅仅是断点。您可以指定输出介质，如screen。在这种情况下，只有显示屏幕才是目标。您也可以只定位print媒体或具有特定方向或分辨率的媒体。

查看更多关于媒体查询和媒体类型的信息MDN或w3schools。

2016-10-01 13:44:27 andreas

回答