当我选择打印时，页面会搞砸。如何保持相同的格式？

Question

我创建了一个简单易用的用户打印页面，其中包含一些简单的css和html代码。 这就是它的样子

Screenshot of actual page

问题是，当我按下CTRL + P打印当前页面时，预览会很乱，如下所示。

我的问题是，当有人想要打印页面时，如何保留我创建的php文件的格式？

这是我使用的CSS：

<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen"> 
<link rel="stylesheet" type="text/css" href="css/settings.css" media="screen" /> 
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">

screenshot of the print preview page

Answer 1

在你的CSS中你应该制定新的打印规则：

@media screen {
    /* screen rules */
}
@media print {
  /* print rules */
}
@media screen,print {
    /* global rules */
}

如果您想在一个独特的文件中抽象出所有这些规则，那么这样的话会有效：

<link rel="stylesheet" href="screen.css" media="screen" />
<link rel="stylesheet" href="print.css"  media="print" />
<link rel="stylesheet" href="global.css" media="all" />