代码之家 › 专栏 › 技术社区 › nakiya

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

media-queries css html

nakiya · 技术社区 · 8 年前

也许是个愚蠢的问题。

我有不同的打印和屏幕媒体风格。我有多个页面,我想以A4格式显示给用户(无需打印)。从那里,用户可以根据需要打印页面。

就我自己而言,目前我在chrome中模拟css媒体。但这不是一个解决方案。

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

2 回复 | 直到 8 年前

user4676340 user4676340 8 年前

A4纸的比例约为1.414。

这意味着,如果要“模拟”A4显示,只需创建一个具有相应比率的div即可:

.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;
}

<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>