Question

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

我以为我可以使用简单的css媒体查询来执行此操作，但它无法正常工作。

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

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

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

http://jsfiddle.net/qC3af/

在firefox中查看上述内容的打印预览时，既不应用颜色也不应用单色。在镀铬中，即使在黑色和黑色中也能保持颜色。白色模式。

我错过了什么？

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

Answer 1

一般来说，这是不可靠的。你可以在这里看到描述：

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

我会注意到我的角落认为它至少有16个而不是32个颜色索引，因此它似乎意识到它有16种色调，但随后它会误认为它们并且单色测试失败......

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

Answer 2

首先，我通常使用@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 */
  }
}

媒体查询彩色单色和打印

2 个答案: