Question

我正在研究现有的html5应用程序。

其html页面包含打印样式

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

receipt.css文件还包含@media和@page指令

.myreceipt {
    @page {
        visibility: hidden;
        margin: 0 15px;
    }

    @page {
        height: auto;
    }
}

    .myreceipt body {
        margin: 0;
        padding: 0;
        width: 100%;
    }

@media screen {

    .myreceipt #receipt-header img {
        width: 300px;
    }
}

.myreceipt #receipt {
    margin: 0;
    width: 100%;
    padding: 0;
    background-color: #fff;
}

@media print {
    .myreceipt #receipt {
        color: #000;
    }
}

为什么css文件包含媒体指令？如果html文件包含media='print'，它是否仅用于打印？可以从css文件中完全删除@media screen个元素并安全删除@media print个指令吗？或者他们有什么理由，这个css是由专业人士创造的？

为什么在@page中指定了visibility: hidden？根据文档，visibility: hidden会忽略@page，是否可以安全删除？ @page也可以删除，因为html文件包含media = print，在这种情况下总是使用@page吗？

Answer 1

为什么css文件包含媒体指令？
或者他们有什么理由，这个css是由专业人士创造的吗？

因为它可以用于不同的媒体（例如屏幕，打印等）

如果html文件包含media ='print'，它是否仅用于打印？

是

可以从css文件中完全删除@media屏幕元素并安全删除@media print指令吗？

仅当使用media =“print”从链接元素链接文件时。

为什么可见性：隐藏在@page中指定？根据doc，可见性：@page隐藏被忽略，是否可以安全删除？

这是CSS 2.1。它对CSS 3（http://dev.w3.org/csswg/css-page/#content-empty）来说很重要。但是，截至目前，在Firefox 25中，可见性和高度均无效，因此被忽略。

@page也可以删除，因为html文件包含media = print，在这种情况下总是使用@page吗？

是的，但也有不同（更好）的原因：at-rules（@page，@ media）必须定义为顶级。正如你的样式表一样，@ page在.myreceipt中，它们只是被忽略，所以你也可以删除它们。

如果没有忽略它们（即在.myreceipt之外），那么你应该知道@page是指页面上的实际打印区域，而不是.myreceipt（https://developer.mozilla.org/en-US/docs/Web/CSS/@page）。因此，如果要删除它们，则必须对body元素应用一些等效的格式。

我想最后指出，在这种情况下，“由专业人士创建”可能更多地指的是有人获得报酬，而不是某人是这方面的专家。

安德烈

在media ='print'css文件中使用@media和@page的目的是什么

1 个答案: