为什么在媒体查询中使用“媒体类型”？答案

【问题标题】：Why are "media types" in media queries used?为什么在媒体查询中使用“媒体类型”？
【发布时间】：2019-04-17 16:06:14
【问题描述】：

我不断看到大量类似这样的媒体查询示例：

@media screen and (min-width: 700px) and (orientation: landscape)

或

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)

现在，我了解如何使用“屏幕”、“打印”和“语音”等关键字，但我不明白这一点。也许使用“打印”进行一些更改以节省墨水（尽管我认为这是一个边缘情况，因为默认情况下不打印背景），但是为什么您需要指定“语音”？为什么媒体查询的示例如此频繁地指定“屏幕”？

【问题讨论】：

【解决方案1】：

来自 W3C 的 specification 建议媒体查询也可用于 HTML、XHTML、XML。或许，语音媒体类型的查询主要用于将文本转语音软件导入到各种文档类型中。

这是我能找到的唯一一个描述语音媒体类型的source，但它并没有真正提供一个很好的例子来说明它是如何使用的。

至于为什么例子中经常使用screen media type，仅仅是因为它是最常用的。以前版本的媒体查询有许多媒体类型，但现在已被删除，因为它们几乎没有用途或与当前媒体类型具有相同的用途。

未来，他们可能会更改规范，删除那些不太有用的媒体类型或添加更多以适应未来的技术。

更新：我发现了一个 GitHub thread 讨论语音媒体类型。它基本上说语音主要用于处理语音的用户代理。例如。 Siri 或 Alexa。

【讨论】：

【解决方案2】：

CSS 语法

@media not|only mediatype and (media feature and|or|not mediafeature) {
    CSS-Code;
}

not、only 和 and 关键字的含义：

not: not 关键字会还原整个媒体查询的含义。

only：唯一的关键字阻止不支持具有媒体功能的媒体查询的旧浏览器应用指定的样式。它对现代浏览器没有影响。

and：and 关键字将媒体特征与媒体类型或其他媒体特征结合起来。

它们都是可选的。但是，如果不使用或仅使用，则还必须指定媒体类型。

媒体类型

全部默认。用于所有媒体类型的设备

打印用于打印机

screen用于电脑屏幕、平板电脑、智能手机等。

语音用于大声“阅读”页面的屏幕阅读器

【讨论】：