Question

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

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

我坚持如何缩小页面并转换为像素。是否有任何JS库可用于将A4页面（21cm / 29.7cm）@ 300dpi转换为div最大宽度500px @ 72dpi？我希望大约有20种不同大小的页面。

我或者在Print或Web上工作过，但尝试加入它们有点令人困惑。我有一个基本的A4代码片段，A3的A4页面大小调整为A4，A3和A5。

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

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

要转换为打印就绪打印件，我们需要扩展到300 DPI，因为72进入300 4.166666666666667次，我们需要将原始尺寸乘以这个数字;

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

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

打印页面以分配大小

1 个答案: