CSS @media print with inches 在打印后给出其他尺寸答案

【问题标题】：CSS @media print with inches gives other sizes after printingCSS @media print with inches 在打印后给出其他尺寸
【发布时间】：2019-08-10 17:46:51
【问题描述】：

我正在制作一个项目，我必须在其中打印页面的单个 div。问题是当我尝试打印内容时，@page 标签不会影响任何内容。另外，我决定简单地将我想要打印的真实世界尺寸放入元素中，但打印内容的尺寸与指定的尺寸不匹配。

我的css代码是：

@media print {
    @page {
        width: 3.5in;
        height: 2in;
    }
    body * {
        visibility: hidden;
        border: 1px solid black;
    }
    #ticket, #ticket * {
        visibility: visible;
    }
    #ticket {
        position: absolute;
        left: 0;
        top: 0;
        background-color: #ff0000;
        border: 1px solid yellowgreen;
        width: 3.5in;
        height: 2in;
    }
}

我已经尝试过 @page { size: A3 } 之类的东西和很多东西，但它不起作用。基本上我需要能够打印真实世界尺寸的东西，当我点击打印时，打印配置正确处理样式表，我不知道这是否可能，或者是否有一种简单的方法可以实现这一点。

提前致谢

【问题讨论】：

标签： html css reactjs printing media-queries

【解决方案1】：

@PAGE 规则 @page 规则允许您指定页面框的各个方面。例如，您需要指定页面的尺寸。以下规则指定默认页面大小为 5.5 x 8.5 英寸。如果您打算打印一本书，也许是通过按需打印服务，那么找出您可以使用的尺寸很重要。

@page { size: 5.5in 8.5in;} //尝试像这样应用高度宽度

【讨论】：

当我这样做时，当我点击打印时，我仍然在看同样的东西。它为我设置了默认的字母。即使我减少了很多页面大小也不会改变。
你也可以分享 html 吗？它将更好地概述问题
代码真的很简单。是一个反应组件，现在我只是在测试这个：<div id="ticket">Just print this</div>

【解决方案2】：

我不太确定您在帖子中指的是什么，但我觉得这可能会有所帮助。

创建一个 CSS 样式表或简单地在您的 HTML 标头中添加 样式标记。

    <style>
        @media print {
           @page {
                  size: 5.5in 8.5in ;
                  size: landscape;
                 }
             }
     </style>

这样，您的窗口打印中将禁用纸张大小和布局选择。希望这会有所帮助。

【讨论】：

我想从我的 HTML 中打印一张名片。当我将页面发送到打印机并测量结果时，内容的大小不准确。