时间戳

首页 > 解决方案 > 为什么 css 变量在 @page 规则中不起作用

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

问题描述

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

: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 规则中不起作用。eg print margin 50cm 没有效果！

请帮忙 ：-（

标签： cssvariablesprintingvar

解决方案

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

推荐阅读