媒体查询彩色单色和打印

Posted 2023-03-06

【中文标题】媒体查询彩色单色和打印

【英文标题】：media queries color monochrome and printing

【发布时间】：2013-06-22 02:26:15

【问题描述】：

我正在尝试为单色设备设置一些替代样式 - 即黑白打印输出。

我以为我可以使用一个简单的 css 媒体查询来执行此操作，但它不起作用。

.Something  color: red; 
@media all and (monochrome) 

  .Something  color: black; 

当我尝试打印（或预览）它时，未应用单色样式。

上面是一个糟糕的例子，但我设置了一个 JSFiddle：

http://jsfiddle.net/qC3af/

在 Firefox 中查看上述打印预览时，既不应用彩色也不应用单色。 在 chrome 中，即使在黑白模式下，它也能保持颜色特征。

我错过了什么？

我确实注意到 JSFiddle 突出显示颜色的方式与所有其他媒体查询不同。这是线索吗？

【参考方案1】：

首先，我通常使用@media print 进行打印操作。在媒体打印里面可以设置@page

例如，假设您想在横向模式下打印页面。这简直完美。

@media print 
    @page 
        size: landscape;
    

对于您的问题，我会使用@media print。在正文选择器中，您可以使用filter: grayscale(100%);

所以代码看起来像这样。

 @media print 
        body 
            filter: grayscale(100%);
        
    

如果你的目标是旧版 IE，你应该为 Safari 和 Opera 添加filter: Gray(); filter: url('#grayscale');

这是最终代码...

@media print 
  body 
    /* IE4-8 and 9 */
    filter: Gray();
    /* SVG version for IE10, Chrome 17, FF3.5, Safari 5.2 and Opera 11.6 */
    filter: url('#grayscale'); 
    /* CSS3 filter, at the moment Webkit only. Prefix it for future implementations */
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%); /* future-proof */
  

【讨论】：

我想你可能误解了这个 5 年前的问题

刚刚给出了一个答案，以防有人从中受益：）

【参考方案2】：

一般来说这是不可靠的。您可以在此处查看说明：

http://www.quirksmode.org/css/tests/mediaqueries/color.html

我会注意到，我的角落认为它至少有 16 个但不是 32 个颜色索引，所以它似乎知道它有 16 种色调，但随后它错误标记了它们并未能通过单色测试...

实际上，浏览器无法完全了解其显示。例如，它可能正在向具有比真实硬件更多功能的虚拟设备显示。

【讨论】：

所以基本上你所说的是彩色和单色媒体查询（在撰写本文时）基本上毫无价值？真可惜。我想我会保留我的 css 更改但未经测试，因为它们有朝一日会得到适当的支持。谢谢

是的，向设备询问初始默认设置是件好事，但如果您认真对待它而没有用户覆盖，则弊大于利..