html5 a4页面,如何在A4纸张尺寸页面制作HTML页面？

largeQ

在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(毫米)进行大小调整，因为这可以避免根据您使用的客户端出现可能出现的故障。

0

0