在2005年11月，AlistApart.com發表了一篇關于他們如何使用HTML和CSS發表一本書的文章。請參閱：http：//alistapart.com/article/boom

這是該文章的摘錄：CSS2有一個分頁媒體的概念(想想紙張)，而不是連續媒體(想想滾動條)。樣式表可以設置頁面大小及其邊距。頁面模板可以給出名稱，元素可以說明要打印的頁面。此外，源文檔中的元素可以強制分頁。這是我們使用的樣式表的片段：@page?{

size:?7in?9.25in;

margin:?27mm?16mm?27mm?16mm;}

有了一個美國的出版商，我們得到了以英寸為單位的頁面大小。作為歐洲人，我們繼續進行公制測量。CSS接受兩者。

設置頁面大小和頁邊距后，我們需要確保在正確的位置有分頁符。以下摘錄顯示了如何在章節和附錄之后生成分頁符：div.chapter,?div.appendix?{

page-break-after:?always;}

另外，我們使用CSS2來聲明命名頁面：div.titlepage?{

page:?blank;}

也就是說，標題頁將打印在名稱為“空白”的頁面上.CSS2描述了命名頁面的概念，但只有當頁眉和頁腳可用時，它們的值才會變得明顯。

無論如何…

由于您要打印A4，當然需要不同的尺寸：@page?{

size:?21cm?29.7cm;

margin:?30mm?45mm?30mm?45mm;

/*?change?the?margins?as?you?want?them?to?be.?*/}

本文深入研究設置分頁符等內容，因此您可能希望完全閱讀。

在您的情況下，訣竅是首先創建打印CSS。大多數現代瀏覽器(> 2005)支持縮放，并且已經能夠基于打印CSS顯示網站。

現在，您將希望使Web顯示看起來有點不同，并使整個設計適應大多數瀏覽器(包括2005年之前的舊版本)。為此，您必須創建一個Web CSS文件或覆蓋打印CSS的某些部分。在為Web顯示創建CSS時，請記住瀏覽器可以具有任何大小(想想：“移動”到“大屏幕電視”)。含義：對于Web CSS，您的頁面寬度和圖像寬度最好使用可變寬度(％)設置，以支持盡可能多的顯示設備和Web瀏覽客戶端。

編輯(26-02-2015)

今天，我偶然發現了SmashingMagazine上的另一篇近期文章，該文章也潛入了使用HTML和CSS進行打印設計......以防萬一你可以使用另一個教程。

編輯(30-10-2018)

它引起了我的注意，因為size它不是有效的CSS3，這確實是正確的 - 我只是重復了文章中引用的代碼(如上所述)是很好的舊CSS2(當你查看文章年份時這是有道理的這個答案首次發表)。無論如何，這是您的復制和粘貼方便的有效CSS3代碼：@media?print?{

body{

width:?21cm;

height:?29.7cm;

margin:?30mm?45mm?30mm?45mm;

/*?change?the?margins?as?you?want?them?to?be.?*/

}?}

如果您認為您確實需要像素(實際上應該避免使用像素)，則必須注意選擇正確的DPI進行打印：72 dpi(網頁)= 595 X 842像素

300 dpi(打印)= 2480 X 3508像素

600 dpi(高質量打印)= 4960 X 7016像素

然而，我會避免麻煩，只需使用cm(厘米)或mm(毫米)進行大小調整，因為這可以避免根據您使用的客戶端出現可能出現的故障。

總結

以上是生活随笔為你收集整理的div 设置a4大小_如何在A4纸张尺寸页面制作HTML页面？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。