css - 如何正确定义多个样式表的媒体类型？

Question

我有一个网页，我知道正在使用各种浏览器、移动设备等查看该网页。我只想添加一个可打印的 View 。

当前样式表链接如下所示:

<link rel="stylesheet" type="text/css" href="somefile.css" media="all" />

我想要做的是“如果打印，使用这个新的样式表；否则使用原来的样式表。”

为此，我可以像这样简单地添加一个打印样式表吗？

<link rel="stylesheet" type="text/css" href="somefile.css" media="print" />

换句话说，同时使用“all”来捕获我可能没有想到的任何设备类型，并使用“print”来处理特定媒体是否有意义？

Answer 1

spec明确指出 all 媒体类型意味着样式表适用于所有媒体类型。

如果这是正确的，您可以使用它。

然而，情况可能并非如此(它真的适合语音吗？)，因此您应该将主样式表设置为screen:

<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

您还可以在单个 css 文件中定义媒体类型，以使用 @media at-rules 来表示应将哪些规则与哪种媒体类型一起使用。