css - 媒体查询 |定义 "Screen"

Question

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

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

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

和

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

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

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

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

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

Answer 1

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

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’.

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

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

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)/窗口相同。

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

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

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

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

“宽度”特性改为针对实际的“显示表面”，即窗口大小或视口(viewport)。如规范中所述-

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

这意味着具有(比方说)40% 设备宽度的非最大化窗口的用户将获得您为那个宽度选择的设计，而不是整个 100% 宽度的设计设备。