媒体查询 |定义 "Screen"

Media Queries | Defining "Screen"

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

定义媒体查询时,您通常采用以下两种方式之一:

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

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

我有兴趣了解的是人们定义 "screen" 的原因是什么?这是定义媒体查询时必须吗?

此外 - 关于使用 min-widthmax-width 的最佳/常见做法是什么?

Google 建议 不要 使用 min-device-width属性:

https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en

媒体规则的 "screen" 方面称为 "media type" 并过滤可以应用查询中的样式的上下文。

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features.

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

if the media type is not explicitly given it is ‘all’.

因此,在严格的技术和 "as per the spec" 意义上,"screen" 可以从您的媒体查询中省略。

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

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

Note: It is expected that all of the media types will also be deprecated in time, as appropriate media features are defined which capture their important differences.

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

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

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

完全等同于-

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

而不是引用-

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

由于 'all' 显然包括 'screen',渲染效果在您的测试中是相同的,但了解这些 而不是 可能会有用相等的表达式。

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

关于 Google 不使用 min-device-width 的建议(或者实际上我完全建议使用 device-width - 除非你非常明确地理解你在做什么),这几乎是当然,因为设备(通常是屏幕)的宽度 而不是 始终与呈现页面的 viewport/window 相同。

在笔记本电脑或台式机环境中,用户同时打开多个 windows 以进行多用途操作时,这种情况最常见,也最容易解释。在 windows 之间分配任务或复制数据。非最大化浏览器 window 没有填满整个桌面 space 因此 window 宽度 与宽度不同浏览器报告的设备本身。

一些平板电脑和电视能够进行多任务处理或多个并排或 window-in-window windows,特别是平板电脑 运行 Windows 8,所以这不仅仅是 "desktop" 环境中的问题。

如果您的媒体查询使用 'device-width' 而不是简单的 'width' 那么无论用户如何调整他们的 window 大小或挤压它 - 您的设计都不会改变并且适应。监视器的大小和分辨率保持不变,因此媒体查询表达式的计算不会发生变化。要更改设计,您的用户可用的唯一选项是最大化 window、更改其设备上的显示分辨率(如果可能)或完全更改为另一台设备。

如果用户在 window 中仔细查看为他们的全屏宽度设计的设计,这对用户来说可能不是最佳选择 window 需要经常滚动 and/or 隐藏重要内容屏幕.

'width' 功能改为针对实际 "display surface",即 window 大小或视口。如规范中所述-

The ‘width’ media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport

这意味着具有非最大化 window 设备宽度(例如)40% 的用户将获得您为 that 选择的设计宽度而不是设备的完整 100% 宽度。