Question

我有一个网页，我知道在不同的浏览器，移动设备等中查看。我只是想添加一个可打印的视图。

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

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

我想要做的是“如果打印，使用这个新的样式表;或者使用原始样式表”。

要做到这一点，我可以简单地添加一个打印样式表吗？

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

换句话说，让“all”捕获我可能没有想到的任何设备类型，以及“打印”特定媒体是否有意义？

Answer 1

来自a W3 schools example：

@media screen {
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print {
    p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print {
    p.test {font-weight:bold;}
}

Answer 2

spec明确表示all媒体类型表示样式表适合所有媒体类型。

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

然而，可能情况并非如此（它是否真的适合speech？），所以你应该将主样式表设置为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来表示应该使用哪种媒体类型的规则。

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

2 个答案: