html / css打印样式

最近做公司后台系统，需要打印贴箱标签，按照正常打印A4纸的标准，测试的效果不是自己想要的，文字排版布局都乱了，查了一些资料，需要设置的东西我总结了一下：

显示器(screen)和打印机(printer)是两种差别很大的设备,所以要设置html/css打印样式。 screen一般使用逻辑单位比如px，而打印机则应该使用物理单位比如cm（厘米）或in（英寸）。因此如果要精确的控制打印效果就应该使用print css，这是跨平台兼容的标准。不推荐使用浏览器插件方式实现打印。

首先引用print css打印样式：

<!-- 外链式写法： -->
<link rel="stylesheet" type="text/css" href="print.css" media="print">
<!-- style写法： -->
<style media="print">...</style>
<!-- 使用link标签规则性能更好 -->

<!--使用@media规则可以在通用的样式表中,使用@media规则指定样式用于打印:-->

@media print selector {...}  或者

@media print {
  selector{...}
}

@page规则：

@page规则允许你指定页面盒子的许多方面,比如规定page的尺寸

@page {
    size: 10cm 10cm;<!--通过长度单位cm/in设置-->
    }
@page {
    size: A4;<!--通过纸质尺寸关键字设置-->
    }
@page {
    size: A4 landscape;<!--通过关键字来指定页面方向portrait/landscape-->
    }

设置打印分页：

<!--css设置-->
@media print {
        .page {page-break-after: always;}
}

<!--

需要给打印一页的内容div加上class.page-->