媒体查询 | 定义“屏幕”

4

我一直在研究这个话题,但找不到答案。

当定义媒体查询时,通常有两种方式:

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

and

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

我感兴趣的是为什么要定义“屏幕(screen)”?在定义媒体查询时,这是必须的吗?
此外,关于使用"min-width"或"max-width",最佳/常见实践是什么?
Google建议不要使用“min-device-width”属性。
参考链接:https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en
1个回答

4
"screen"媒体规则中的“屏幕”方面被称为“媒体类型”,并过滤了可以应用于查询内的样式的上下文。
媒体查询由一个“媒体类型”和零个或多个表达式组成,这些表达式检查特定媒体功能的条件。
规范确实说明可以省略类型-
如果未明确给出媒体类型,则为“全部”。
因此,在严格技术和“按照规范”的意义上,您的媒体查询可以省略“屏幕”。
我曾经学过,一些不理解媒体查询规范的浏览器在没有指定媒体类型的情况下会遇到困难,并渲染所有样式。这是大约两年前,我正在努力找到任何引文和参考资料,无论是当代还是其他,所以现在这可能不是您考虑的有价值的问题。 媒体查询规范的第4版除了屏幕、打印和语音(主要是因为手持设备、电视、屏幕等之间的界限现在变得极其模糊)之外,不再支持所有特定的媒体查询,并声明-
注意:预计随着定义了能够捕获其重要差异的适当媒体特征,所有媒体类型也将被弃用。

因此,除非您的测试发现旧版浏览器和未指定媒体类型的媒体查询存在问题,否则您应该可以安全地省略样式表中的类型。

需要注意的是,您的示例并不完全相等。 示例-

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

完全等同于-

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

而不是引用的-

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

由于“所有”显然包括“屏幕”,所以在您的测试中呈现的效果是相同的,但了解这些相等的表达式可能很有用。
最明显的是省略类型将意味着您的样式将在打印时应用,其中表达式的其余部分也评估为true。
关于来自Google的建议不要使用min-device-width(或者我会建议根本不要使用device-width——除非您非常明确地了解自己在做什么),这几乎可以确定为设备的宽度(通常为屏幕)与呈现您的页面的视口/窗口的宽度并不总是相同。
这通常是情况,并且可以在笔记本电脑或桌面环境的上下文中最容易地解释和解决,用户在其中同时打开多个窗口以进行多任务处理或复制窗口之间的数据。非最大化的浏览器窗口不会填充整个桌面空间,因此,由浏览器报告的设备本身的宽度与窗口宽度大小不同。
一些平板电脑和电视能够进行多任务处理或多个并排或窗口内的窗口,特别是在运行Windows 8的平板电脑中,因此这不仅是“桌面”环境中的问题。
如果您的媒体查询使用了“device-width”而不是简单的“width”,那么无论用户如何调整其窗口大小或压缩它,您的设计都不会改变和适应。显示器的尺寸和分辨率保持不变,因此您的媒体查询表达式也不会发生变化。用户要更改设计的唯一选项是将窗口最大化,在其设备上更改显示分辨率(如果可能),或更换另一个设备。
如果在相对较小的窗口中查看专为其全屏宽度精心设计的设计,则可能对用户来说不太理想,需要频繁滚动和/或将重要内容隐藏在屏幕外。
相反,“width”功能则针对实际的“显示表面”,即窗口大小或视口。正如规范所述-
“width”媒体功能描述输出设备的目标显示区域的宽度。对于连续媒体,这是视口的宽度
这意味着具有非最大化窗口(例如)设备宽度40%的用户将获得您选择的设计,而不是设备的完整100%宽度。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接