Question

我正在制作一个生成报告的网站，然后这些报告可以打印在PDF上。这些报告是动态的，每次都显示不同的信息，因此我无法事先创建PDF，需要根据用户在屏幕上显示的内容进行打印。

我正在使用Bootstrap和this fix，因此移动布局不会在打印时呈现。

但是，我注意到打印版本仍受Web版本的影响，因此如果用户在非常小的屏幕上生成报告，它仍将打印移动版本。

<div class="container">
 <div class="row">
  <div class="col-md-3 col-sm-3">
   <div id="chart1"></div>
  </div>
  <div class="col-md-3 col-sm-3">
   <div id="chart2"></div>
  </div>
  <div class="col-md-6 col-sm-6">
   <div id="chart3"></div>
  </div>
 </div>
</div>

＆＃34; sm＆＃34;类用于打印，但如果屏幕显示所有不同行的图表，因为它是一个较小的屏幕，打印版本将以这种方式显示，即使信纸尺寸可以容纳一行中的所有三个图形。

有没有办法解决这个问题？

Answer 1

@media Queries负责此事您应该应用自定义媒体查询来覆盖引导行为。如果你没有UI并且需要快速的东西，Bootstrap是很好的，但在自定义开发中，它比助手更难以屁股。

可以尝试这种超级通用修复

@media print {
div.col-md-3 {
  display:block;float:left;width:25%;
}
div.col-md-6{
  display:block;float:left;width:50%;
}
}

但是，我会给他们特定的类，除非你对所有的.col-md-3和.col-md-6类都进行了更改以进行打印。（或者，编辑引导程序并添加媒体查询以进行打印或更改其定义的打印查询）根据需要微调并调整宽度，

如何使网站的打印版本不受屏幕尺寸的影响？

1 个答案: