適合任何屏幕分辨率

我爲我的網站創建一個打印模板一切都很好，但我有一個問題，我的屏幕分辨率是1600x900，所以我設計了該分辨率的頁面，我說的是高度，因爲我的網頁與引導創建的，因此它的響應，聽起來有些奇怪，但讓我解釋一下，在我的屏幕上的頁面看起來是這樣的：適合任何屏幕分辨率

這一切如果「打印預覽（Ctrl + p鍵）」

Header 
Some text 
Some text 
Some text 
Some text 
Body 
Some text 
Some text 
Some text 
Some text 
Footer 
Some text 
Some text 
Some text 
Some text

但是，當我嘗試與他人的決議看起來像這樣：

Header 
Some text 
Some text 
Some text 
Some text 
Body 
Some text 
Some text 
Some text 

Page 2 
Some text 
Footer 
Some text 
Some text 
Some text 
Some text

我在這裏的問題是，如果存在一種方法來適應頁面到任何分辨率相同的高度，換句話說就是在我的屏幕上顯示它的外觀。

這是我的嘗試：

p { 
     font-size: 12px; 
     line-height: 1; 
    } 

    @page { 
     size: A4 landscape; 
     margin-left: 18mm; 
     margin-top: 0.2mm; 
    }

有了，有時工作，我不希望你對我的代碼，但我希望一些技巧來解決這個問題，在此先感謝，如果這個我道歉無法理解

來源

2016-08-29 Francisco Fernandez

回顧如何創建[打印樣式表]（http://www.webcredible.com/blog/print-stylesheet-definitive-guide/）。互聯網上有很多網站解釋如何。基本上，你將需要做更多的工作，而不僅僅是設置頁面大小和邊距。 –

我在考慮改變字體大小，邊距，頁面大小和我的所有內容，以適應最常見的分辨率 –

你正在接近這個問題錯了。世界上有各種各樣的屏幕尺寸。設計一個單一的解決方案是錯誤的。充其量，您可以瞄準一系列具有相似尺寸的設備，但是您不包括大量不同的設備。

網頁不需要在每個設備上看起來都一樣。只要你將其內化，你就會開始成爲一個更好的網頁設計師。所有這一切說，你可以使用視口單位來確保一個元素保持與任何屏幕尺寸成比例的大小，但它不會是一個適合所有尺寸的解決方案，而且我也不相信這在您打印時有效。

例如：

.container{ height: 100vh width: 100vw; }

您還可以使用媒體查詢，告訴瀏覽器如何應該打印你的網頁，這是確保頁打印你想要的方式的好辦法至。例如，您可以編寫@media print and (min-width: 30em){}而不是@media screen and (min-width: 30em){…}。

請記住，您的打印樣式表可能已經在使用來自其他移動或平板媒體查詢的樣式，所以有時可能會有點棘手，您可能需要重寫它們。印刷文件通常具有非常窄的「視口」。

來源

2016-08-29 16:20:54 Ragdoll

我明白你的意思，我認爲我的問題不是很清楚，頁面在任何分辨率因爲是響應式（我使用Bootstrap），當我鍵入CTRL + P我的目標是一個特定的div和在我的屏幕上，我可以在一個頁面上打印該div，但是當我在另一個屏幕分辨率相同時，我打印該div 2頁或更多的問題，我想知道它是否可能適合任何分辨率 –

我編輯添加有關打印媒體查詢，這可能是您正在尋找的信息。 – Ragdoll

適合任何屏幕分辨率

回答

相關問題