设计用于打印和显示的网页

Question

我有一个创建报告生成器的项目。目标是拥有一个 16:9 比例的网页版（在浏览器上显示）和一个打印效果很好的印刷版。

所以我有几个问题。

首先，我已经阅读了很多关于此的答案，但没有一个是相同的。那么是否有适合打印的像素宽度/高度

喜欢：

.page{width:21cm; height:29.7cm})

<div class='page'></div> 

如果不是，人们是如何做到的？

另一个问题： 我想使用 enquire.js 在打印时修改我的DOM（因为我一次只显示一张幻灯片，并且我需要全部打印）。问题是它只显示一页。我认为这是一个时间问题（在浏览器获取页面之前查询没有完成它的工作，所以它只是部分修改。这是我能想出的唯一原因）

enquire.register('print', {
  match: function() {
    slides.each(function(index, element) {
      $("#printContainer").append(element)
    });


    $('.slider').css('display', 'none')
  }
});

Answer 1

您可以使用两个不同的 css 文件 (print/screen)：

<link rel="stylesheet" media="screen" type="text/css" href="/screen-styles.min.css">
<link rel="stylesheet" media="print" type="text/css" href="/print-styles.min.css">

当您从浏览器查看网站时，第一个 css 表只会影响布局。现在，当您按下打印按钮（或大多数浏览器中的ctrl+p）时，第二张纸将影响布局，而第一张将被忽略。