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

Question

我有一个创建报告生成器的项目。目的是有一个 16:9 比率的网络版本（显示在浏览器上）和一个可以很好地打印的打印版本。

所以我有几个问题。

首先，我已经阅读了很多关于这个的答案，但没有一个是相同的。那么有没有好的像素width/height打印

喜欢：

.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 sheet 只会影响您从浏览器查看网站时的布局。现在，当您按下打印按钮（或大多数浏览器中的 ctrl+p）时，第二个 sheet 将影响布局，第一个将被忽略。

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

Designing a webpage for both purposes of printing and displaying

html

javascript

css

printing

media-queries