CSS 打印预览/实际打印机打印
打印样式设置
- 在length中有相对长度及绝对长度一说
- 绝对长度单位为cm、mm等
- 什么是绝对长度单位：当输出介质的物理性质已知时，如用于打印布局，绝对长度单位代表一个物理度量单位。这是通过：将一个单元锚定到一个物理单元，并将其定义为相对于它的另一个，来实现的。对于低分辨率的设备（如屏幕），高分辨率设备（如打印机），该锚定是不同的（ developer.mozilla.org/zh-CN/docs/… ）
- 从上可以看出根据dpi设备的不同 度量单位锚的定义其实是不同的 所以当你设置了{ height: 1cm }时，对于打印机来说就是1cm 但是对于你屏幕的预览来说 其实他是按照1px为锚来解析1cm 也就是你看到的1cm 其实是屏幕解析为px之后的1cm 不一定==物理上的绝对1cm 但是打印机是以1cm为基础单元锚及1cm就是实际的物理上的1cm 即你设置了1cm 打印机就是1cm
- 基于上一部分 当你想要设置多长单位的打印值时 直接设置绝对长度 并设置相应的纸张尺寸即可
- 举个🌰 （当你想要设置打印样式为10cm宽 20cm高的打印样式时）
- 你可以设置打印样式为{ width: 10cm; height: 20cm; }
- 此时 当你用打印设备打印出此样式时 用物理量尺测量之后就可以发现 他的长宽分别为 10cm、20cm 但是位置却会有偏移 这是为什么呢 因为纸张尺寸不同 预览跳页之后 打印时也会强制跳页
- 设置电脑中的纸张尺寸（进入电脑设置页面找到打印机和扫描仪 => 相关设置 => 打印服务器属性 => 创建新纸张规格 => 配置完成）配置完成后 就可以在打印设置中设置了（在打印设备选项中可以创建纸张为10cm x 20cm）这个时候你在预览时 会发现基本上和你设想的打印样式及纸张吻合了 但是还是会有少许偏差
- 此偏差的原因是因为 你设置的时候10cm是不会自动扣除掉打印中的边距的 打开打印设置更多设置 你会发现一个叫边距的选项 这是偏差的主要原因 如果是border的还要扣除掉border的样式（可以直接使用css3的calc(10cm - 1px)这种方式来混用绝对和相对长度）
- 扣除掉打印自带边距及你设置的样式中的边距 选择刚刚创建的10cm x 20cm的纸张尺寸 打印 达到目标需求
