如何从main.css文件中提取@media print而不需要单独的print.css文件

Question

在继续之前，我想先澄清一下。这是个坏习惯吗?把@media打印在main.css文件中，而不是单独的print.css文件中，利弊是什么?

在过去的项目中，我不得不复制css的整个部分转移到一个单独的print.css文件中，这样当浏览器客户端被选中打印页面概述时，只有手工挑选的用于打印的部分将被发送到打印堆栈。这是通过在标题等中添加打印隐藏标签来实现的，看起来真的很乱。

这里有一个类似的问题。

是否有一种方法可以使用相同的CSS样式表打印媒体和默认布局?

有更简单的方法吗?不需要复制css?似乎由于wwwroot文件夹的文件夹布局，如果没有一个print. CSS文件编译，@media打印CSS点没有实现。尽管它们仍然包含在css中。最小文件

任何帮助这是感激!

谢谢!//编辑

我的css样式表中有一个像这样的代码片段。

.ContainerHeader {

.thisisincludedclass {
display: none;
}
//@media redirects a source code for css with the same classes to the same section.
@media print {
.ContainerHeader {
display: none !important;
}
.ContainerPageContent {
display: none !important;
}
.thisIsThePrintClass {
display: none;
}
}

仍然显示带有这些类属性的HTML部分。我发现这工作的唯一方法是，如果我导出类到一个完全独立的print.css文件和编译到wwwroot文件夹的print.css文件分开。否则基于@media标签不会创建print.css文件。

Answer 1

您可以通过将媒体打印样式链接指向您的主布局所在的css文件并添加@media print标签来实现这一点。我不确定这是否是最佳实践。

<link href="css/main.min.css" media="screen" rel="stylesheet" />
<link href="css/main.min.css" media="print" rel="stylesheet" />

现在你可以在主css文件中使用@media标签来打印样式。像下面的

.ContainerHeader {
align-items: center;
display: flex;
background-image: url(/images/header.png);
background-size: 100% 100%;
grid-area: ContainerHeader;
width: 100%;
height: 100%;
z-index: 99;
@media print {
.ContainerHeader{
display:none !important;
}
}
}