Question

我不断看到大量的媒体查询示例，如下所示：

@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)

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

Answer 1

CSS语法

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

not，only和和关键字的含义：

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

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

and：and关键字将媒体功能与媒体类型或其他媒体功能组合。

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

媒体类型

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

打印用于打印机

屏幕用于计算机屏幕，平板电脑，智能手机等。

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

Answer 2

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

这是我能找到的唯一描述语音媒体类型的source，但它并没有提供一个很好的使用方式示例。

关于示例为何经常使用屏幕媒体类型的原因，仅仅是因为它是最常用的。先前版本的媒体查询具有多种媒体类型，但由于它们的用途很少或与当前媒体类型具有相同的用途，因此已被删除。

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

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