css - 打印页面到 div 大小

Question

我正在开发一个设计海报的应用程序，目前我一直在考虑 CSS 并编写了一个小演示以了解如何在不同方向输出标准页面尺寸。

我需要在购物详情页中显示预览窗口，然后在稍后阶段从 DIV 生成 PDF(稍后考虑)

我对如何缩小页面并转换为像素感到困惑。例如，是否有任何 JS 库可以将 A4 页面 (21cm/29.7cm) @ 300dpi 转换为最大宽度 500px @ 72dpi 的 div？我预计会有大约 20 种不同大小的页面。

我曾在打印或网络工作过，但尝试将它们结合起来有点令人困惑。我有一个基本 A4、A3 页面大小的代码片段，用 CSS 为 A4、A3 和 A5 调整。

body {
  background: rgb(204,204,204); 
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 21cm;
  height: 29.7cm; 
}
page[size="A4"][layout="portrait"] {
  width: 29.7cm;
  height: 21cm;  
}
page[size="A3"] {
  width: 29.7cm;
  height: 42cm;
}
page[size="A3"][layout="portrait"] {
  width: 42cm;
  height: 29.7cm;  
}
page[size="A5"] {
  width: 14.8cm;
  height: 21cm;
}
page[size="A5"][layout="portrait"] {
  width: 21cm;
  height: 14.8cm;  
}
@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }
}

<page size="A4"></page>
<page size="A4"></page>
<page size="A4" layout="portrait"></page>
<page size="A5"></page>
<page size="A5" layout="portrait"></page>
<page size="A3"></page>
<page size="A3" layout="portrait"></page>

Answer 1

这里没有答案是我自己发现的；

A4 @300 dpi 是21 厘米 x 29.7 厘米8.268 英寸 x 11.693 英寸现在我的突破是使用英寸作为页面大小，因为我们在屏幕上使用 DPI - 每英寸点数。从公制页面到英制 DPI 的转换更加令人困惑(尽管转换单位是完全可能的)

所以很简单;

72 dpi (screen resolution) X 8.268 inch (page width) = 595.296px
72 dpi (screen resolution) X 11.693 inch (page width) = 841.896px

要转换为可打印的打印件，我们需要将 DPI 放大到 300，因为 72 变成 300 4.166666666666667 次，我们需要将原始尺寸乘以这个数字；

595.296px x 4.166666666666667 = 2480.4px 
841.896px x 4.166666666666667 = 3507.9px

在 CSS 中，我可以使用 transform CSS 命令按比例减小 div 的大小以适应 500 像素的空间，并将其用于可在两个方向缩放的流体布局设计。