Css 媒体查询“定义”；屏幕“；

我一直在研究这个问题，但找不到答案

定义媒体查询时，通常采用以下两种方式之一：

@media screen and (min-width: 320px) {}

及

我感兴趣的是，人们为什么会定义“屏幕”？这是定义媒体查询时必须具备的吗

另外-关于使用

最小宽度

或

最大宽度

的最佳/常见做法是什么

谷歌建议不要使用

min device width

属性：

媒体规则的“屏幕”方面称为“媒体类型”，并过滤可应用查询中样式的上下文

媒体查询由媒体类型和零个或多个用于检查特定媒体功能条件的表达式组成

规范中确实说明可以省略该类型-

如果未明确指定媒体类型，则为“全部”。

因此，在严格的技术和“根据规范”的意义上，“屏幕”可以从您的媒体查询中省略

我曾经被告知，一些不理解媒体查询规范的浏览器会遇到困难，除非指定了媒体类型并呈现所有样式。这是大约两年前，我正在努力寻找任何引用和参考它，当代或其他，所以这可能不是一个值得考虑的你现在

不推荐除屏幕、打印和语音（主要是因为手持设备、电视、屏幕等之间的界限现在最模糊）和状态之外的所有特定媒体查询-

注意：预计所有媒体类型也将 已在时间上弃用，根据需要定义了以下媒体功能： 捕捉他们的重要差异

因此，除非您的测试发现遗留浏览器和未指定媒体类型的媒体查询存在问题，否则您应该能够在样式表中安全地省略该类型

不过值得注意的是，你们的例子并不完全相同。榜样-

@media (min-width: 320px) {}

完全等同于-

@media all and (min-width: 320px) {}

而不是被引用的-

@media screen and (min-width: 320px) {}

由于“all”显然包括“screen”，因此在测试中渲染的效果是相同的，但是理解这些表达式是而不是相等表达式可能是有用的

最值得注意的是，省略该类型意味着您的样式将应用于打印，而表达式的其余部分也将计算为true

关于谷歌建议不要使用最小设备宽度（或者实际上我建议使用设备宽度-除非你非常明确地了解你在做什么），这几乎可以肯定是设备的宽度（通常是屏幕）不始终与呈现页面的视口/窗口相同

在笔记本电脑或台式机环境中，用户同时打开多个窗口以执行多任务或在窗口之间复制数据，这种情况最常见，也最容易解释。非最大化浏览器窗口不会填满桌面的全部空间，因此窗口宽度与浏览器报告的设备本身宽度大小不同

一些平板电脑和电视能够执行多任务或多个并排或窗口中的窗口，尤其是运行windows 8的平板电脑，因此这不仅仅是“桌面”环境中的问题

如果您的媒体查询使用的是“设备宽度”，而不是简单的“宽度”，那么无论用户如何调整窗口大小或挤压窗口，您的设计都不会改变和调整。监视器的大小和分辨率保持不变，因此对媒体查询表达式的计算不会发生变化。用户可以更改设计的唯一选项是最大化窗口、更改设备上的显示分辨率（如果可能）或完全更改为其他设备

如果用户在一个小得多的窗口中仔细查看一个设计以达到其全屏宽度，则这可能是次优的-需要频繁滚动和/或在屏幕外隐藏重要内容

“宽度”功能的目标是实际的“显示表面”，即窗口大小或视口。如规范中所述-

“宽度”媒体功能描述目标显示器的宽度 输出设备的面积。对于连续介质，这是 视口

这意味着，非最大化窗口为（比如）设备宽度的40%的用户将获得您为选择的设计，即宽度，而不是设备的全部100%宽度

@media screen and (min-width: 320px) {}