使用未定义的 CSS 媒体查询
Using undefined CSS media queries
我正在研究 CSS 媒体查询最佳实践并找到 Foundation's definition。
如您所见，第一个媒体查询没有min/max-size定义：
@media only screen { } /* Define mobile styles */
为什么他们使用这个没有定义断点的媒体查询？这是最佳做法还是应该避免？
谢谢！
媒体查询不仅仅针对断点。您可以指定输出媒体，如 screen。在这种情况下，只有显示屏是目标。您也可以仅定位 print 媒体，或具有特定方向或分辨率的媒体。
该特定媒体查询适用于所有 screen（任何大小、方向、纵横比或像素密度）。
screen 是一种媒体类型。无论您在该媒体查询中放入什么，都只会应用于 screen，而不会应用于其他 media_type 的内容。
这是 media_type 的 list of currently recognized values。其中大部分已被弃用。您应该使用的（因为它们可能会留在这里）是：
all（如果指定 none 则隐含）screen printspeech
Foundation 的人可能应该将该查询后的评论更改为更明确的评论。他们可能应该使用 /* General styles, including mobile */ 而不是 /* Define mobile styles */。
看看他们的媒体查询结构，您会发现它是一个移动优先CSS框架。如：您首先定义一般样式（包括移动），然后为越来越宽的屏幕应用例外。
我正在研究 CSS 媒体查询最佳实践并找到 Foundation's definition。
如您所见，第一个媒体查询没有min/max-size定义：
@media only screen { } /* Define mobile styles */
为什么他们使用这个没有定义断点的媒体查询？这是最佳做法还是应该避免？
谢谢！
媒体查询不仅仅针对断点。您可以指定输出媒体，如 screen。在这种情况下，只有显示屏是目标。您也可以仅定位 print 媒体，或具有特定方向或分辨率的媒体。
该特定媒体查询适用于所有 screen（任何大小、方向、纵横比或像素密度）。
screen 是一种媒体类型。无论您在该媒体查询中放入什么，都只会应用于 screen，而不会应用于其他 media_type 的内容。
这是 media_type 的 list of currently recognized values。其中大部分已被弃用。您应该使用的（因为它们可能会留在这里）是：
all（如果指定 none 则隐含）screenprintspeech
Foundation 的人可能应该将该查询后的评论更改为更明确的评论。他们可能应该使用 /* General styles, including mobile */ 而不是 /* Define mobile styles */。
看看他们的媒体查询结构，您会发现它是一个移动优先CSS框架。如：您首先定义一般样式（包括移动），然后为越来越宽的屏幕应用例外。