媒体查询|定义"屏幕"

时间:2015-02-10 21:20:25

标签: css css3 responsive-design media-queries

我一直在对这个主题进行一些研究,但无法找到答案。

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

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

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

我有兴趣了解的是人们定义"屏幕&#34 ;?的原因是什么?定义媒体查询时,这是必须吗?

此外 - 关于使用min-widthmax-width

的最佳/常见做法是什么?

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

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

1 个答案:

答案 0 :(得分:1)

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

  

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

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

  

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

因此,在严格的技术和"根据规范"感觉,"屏幕"可以从媒体查询中删除。

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

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

  

注意:预计所有媒体类型也将是   在适当的媒体功能定义时,及时弃用   捕捉他们的重要差异。

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

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

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

完全等同于 -

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

而不是引用 -

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

作为'所有'显然包括' screen',渲染效果在测试中是相同的,但理解这些相等的表达式可能很有用。

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

关于谷歌的建议,不要使用min-device-width(或者我会建议设备宽度 - 除非你非常明白你正在做什么),这几乎可以肯定是设备(通常是屏幕)始终与呈现页面的视口/窗口相同。

在笔记本电脑或桌面环境中,用户可以同时打开多个窗口以进行多任务处理或在窗口之间复制数据,这种情况最常见,并且最容易解释。 。未最大化的浏览器窗口不会填满桌面的整个空间,因此窗口宽度的大小与浏览器报告的设备宽度不同。

某些平板电脑和电视机能够进行多任务处理或多个并排或窗口窗口窗口,特别是运行Windows 8的平板电脑,因此这不仅仅是桌面问题"桌面和# 34;的环境中。

如果您的媒体查询使用了'设备宽度'而不是简单的宽度'然后,无论用户调整窗口大小或调整窗口大小 - 您的设计都不会改变和适应。监视器的大小和分辨率保持不变,因此媒体查询表达式的评估不会发生变化。用户可以选择更改设计的唯一选项是最大化窗口,更改设备的显示分辨率(如果可能)或完全更改为其他设备。

如果在一个明显较小的窗口中仔细查看其全屏宽度的设计,这对于用户来说可能是次优的 - 需要经常滚动和/或隐藏屏幕上的重要内容。

'宽度'而是以实际的"显示表面"为目标,即窗口大小或视口。如规范中所述 -

  

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

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