css - 打印精确尺寸

Question

我需要在普通 A4 纸上打印一个网页。

打印结果应该正好是 20cm x 20cm（不管它在纸上的位置）。

我有这个 html 页面：

body {
  -webkit-print-color-adjust: exact;
  height: 20cm;
  width: 20cm;
  margin: 0;
  padding: 0
}

img {
  height: 20cm;
  width: 20cm;
  position: absolute;
  top: 0;
  left: 0;
}

h1 {
  font-size: 0.9cm;
  position: relative;
  top: 1cm;
  text-align: center;
  width: 70%;
  margin: 0 auto;
  color: #ffde00;
}

@media print {
  body {
    height: 20cm;
    width: 20cm;
  }
}

<img src="background.png">
<h1>My Example Text</h1>

当我打印此页面时（在普通的 lasterJet A4 打印机上），我在纸上得到大约 18.9 厘米的结果。

我怎样才能让它正好 20 厘米？

Answer 1

要设置打印区域，您可以使用@media print 一个例子：

/* style sheet for “letter” printing */
@media print and (width: 1.5in) and (height: 1in) {
@page {
margin: 1in;
}
}