为什么 css 变量在 @page 规则中不起作用答案

【问题标题】：why css variables won't work in @page rule为什么 css 变量在 @page 规则中不起作用
【发布时间】：2019-06-28 02:50:09
【问题描述】：

我在根部分将我的 css 变量定义为：

:root {
  --print-size: A3 landscape;
  --print-margin: 50cm;
}

@media print {
  @page {
size: var(--print-size);
margin: var(--print-margin);
  }
}

<html>
  <head></head>
  <body onload="print()">
<h2>something to print</h2>
  </body>
</html>

为什么它们在我的@page css 规则中没有生效。例如打印边距50cm无效！

请帮忙:-(

【问题讨论】：

【解决方案1】：

@media print {
	@page {
		size: var(--print-size);
		margin: var(--print-margin);
    size: A3 landscape;
    margin:50mm;
	}
}

<html>
  <head>
  </head>
  <body onload="print()">
    <h2>something to print</h2>
  </body>
</html>

【讨论】：