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

问题描述：

我正在生成报告的网站上工作，然后可以打印在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>

的“SM”类是打印的，但如果屏幕显示，因为它是一个较小的屏幕上不同行的图表所有，印刷版将显示它这样，即使在信纸大小可能一行容纳所有三张图。

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

存在引导一个.hidden印刷类来做到这一点 –

但我不想隐藏任何这些div，我希望它们完全按照我将它们放在具有“sm”类的行上的方式进行打印。 @BrianMcCall – adp

为什么有col-sm？他们在你的案例中是一样的 –

答

@media查询对此负责您应该应用自定义媒体查询来覆盖引导程序行为。如果你没有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类被改变打印。（或者，编辑引导并加入您的媒体查询打印或更改其定义打印查询）微调并根据需要调整宽度，

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

相关推荐