css 网页媒体查询中的@page.size属性

刚遇到了个需求，就是要在浏览器打印一个固定规格标签的功能，打印的条码或者二维码要适应30mm*60mm尺寸的纸张。

以最简单粗暴的方式就是在打印的媒体查询里给元素设置宽度100%（被喷我）

@media print {

width:100%

 

}

后面无意中发现了媒体查询中有那么个属性 @page.size

经过一番查询，得知：

这是一种实验技术

由于该技术的规格不稳定，请查看各种浏览器的兼容性表格以供使用。另外请注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

与at规则一起使用的size CSS规则描述符@page定义了用于表示页面的框的大小和方向。大多数情况下，这个尺寸对应于打印页面的目标尺寸（如果适用的话）。

大小可以用“可缩放”关键字来定义（在这种情况下，页面将填充可用的尺寸）或绝对尺寸。

在数据库中找不到值！

在页面中使用：

@media print {

@page{

size:3cm 6cm;

}

.......

这里写打印元素的预览样式，样式还是要设置的，具体看需求了

}

 

其他的不细说了，具体的看下面的地址：

https://cloud.tencent.com/developer/section/1072314