媒体查询 |定义“屏幕”答案

【问题标题】：Media Queries | Defining "Screen"媒体查询 |定义“屏幕”
【发布时间】：2015-04-11 02:17:44
【问题描述】：

我一直在对此主题进行一些研究，但找不到答案。

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

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

和

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

我有兴趣了解人们定义“屏幕”的原因是什么？这是定义媒体查询时必须具备的吗？

另外 - 关于使用 min-width 或 max-width 的最佳/常见做法是什么？

Google 建议不要使用min-device-widthproperty：

【问题讨论】：

【解决方案1】：

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

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

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

如果媒体类型没有明确给出它是“全部”。

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

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

Version 4 of the media queries specification 弃用除了屏幕、印刷和语音（主要是因为手持设备、电视、屏幕等之间的界限现在充其量是极其模糊的）和状态之外的所有特定媒体查询-

注意：预计所有媒体类型也将及时弃用，因为定义了适当的媒体功能捕捉它们的重要差异。

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

值得注意的是，您的示例并不完全相同。例子-

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

完全等价于-

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

而不是被引用的-

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

由于 'all' 显然包含 'screen'，因此在您的测试中呈现的效果是相同的，但了解这些 not 相等表达式可能很有用。

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

关于 Google 不使用 min-device-width 的建议（或者实际上我会建议 device-width - 除非您非常清楚自己在做什么），这几乎可以肯定是设备（通常是屏幕）不始终与呈现页面的视口/窗口相同。

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

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

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

如果在一个小得多的窗口中仔细查看一个设计为全屏宽度的设计，这对于用户来说可能不是最佳选择 - 需要频繁滚动和/或隐藏屏幕外的重要内容。

“宽度”功能改为针对实际的“显示表面”，即窗口大小或视口。如规范所述-

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

这意味着具有（例如）设备宽度的 40% 的非最大化窗口的用户将获得您为那个宽度而不是整个 100% 宽度选择的设计设备。

【讨论】：