css - 如何从英寸计算像素以进行打印

Question

我想允许用户选择固定的纸张尺寸和 dpi，然后生成一个带有图像的 div 容器，该图像具有足够的宽度/高度，当它被发送到具有相同设置(相同的纸张尺寸和 dpi)的打印机时，它将具有预期的大小/质量。

据我所知这个公式很简单，我做了什么: 如果用户选择 24"x 18"72 dpi 它生成一个 div 容器，其中包含 1728px x 1296px 的图像(24"x 72dpi= 1728px 宽度和 18"x 72dpi=1296px)

但是当我将带有媒体打印的 div 发送到打印机时，即使我有设置为 24"x18"x 72dpi 的 PDF 打印机，尺寸实际上小于纸张。

我的公式正确吗？

Answer 1

出于打印目的，您可以定义“打印样式”，它的工作方式类似于媒体查询(实际上它是媒体查询):

@media print {
    body {
        background: none;
    }
    .my_wrapper {
      width: 80%;
      margin: 2in auto;
    }
etc.
}

在那里你可以定义所有元素的尺寸，也可以用绝对单位，比如厘米、英寸等。看看这里:http://www.w3schools.com/cssref/css_units.asp (在该页面的底部)

(记住:里面的内容，只对打印输出有效)

您还可以设置分页符以确定您的网页应在何处划分为打印页面，请参阅 http://www.w3schools.com/cssref/pr_print_pageba.asp以及以下页面。

因此，可以为打印输出制定一个相对精确的布局。但这是一项繁重的工作，而且通常在您的网站上放一个人们可以打印出来的 pdf 文件会更容易。