如何讓網站的印刷版本不受屏幕尺寸的影響？

我正在生成報告的網站上工作，然後可以打印在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」類是打印的，但如果屏幕顯示，因爲它是一個較小的屏幕上不同行的圖表所有，印刷版將顯示它這樣，即使在信紙大小可能一行容納所有三張圖。

有沒有辦法解決這個問題？

來源

2017-03-13 adp

存在引導一個.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類被改變打印。（或者，編輯引導並加入您的媒體查詢打印或更改其定義打印查詢）微調並根據需要調整寬度，

來源

2017-03-13 21:53:39 Silverandrew

如何讓網站的印刷版本不受屏幕尺寸的影響？

回答

相關問題