Question

也许是一个愚蠢的问题。

我有不同的打印和屏幕媒体样式。我有多个页面，我想以A4格式向用户显示（不打印）。从那里，用户可以打印页面，如果他/她想要的话。

对于我自己，我暂时用chrome模拟css媒体。但这不是解决方案。

这里最简单的解决方案是什么？

Answer 1

A4页面的比例约为1.414。

这意味着，如果您想要＆＃34;模仿＆＃34; A4显示屏，只需创建一个具有相应比例的div即可：

＆＃13;

.A4 {
  width: 300px;
  height: calc(300px * 1.414);
  border: 1px solid #ddd;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}

＆＃13;

<div class="A4">
  <p>Title of the page</p>
  <p style="font-size: 8px; padding: 12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisi velit, dapibus quis volutpat at, dapibus sed neque. In hac habitasse platea dictumst. Fusce ut consequat est. Mauris vitae posuere odio. Aenean sit amet metus vel justo consequat porta. Maecenas molestie odio sit amet maximus posuere. Donec luctus consequat faucibus. Nulla sollicitudin molestie bibendum. Mauris elementum tincidunt lobortis. Proin ullamcorper libero vel elementum vehicula. Maecenas in lorem nibh. Ut non gravida ipsum, eu auctor turpis. Aenean imperdiet feugiat ex vitae pharetra.</p>
</div>

＆＃13;

Answer 2

您可以在屏幕上启用其他模板并启用print css。

您可以在样式表中使用@media print而不是media=“print”，而是在media=“screen”的常规模板中添加print.css，并在预览模板中定义{{1}}

是否可以在不实际打印的情况下将打印布局显示为html页面？

2 个答案: