如何设计用于打印标签的CSS

Question

当我的网站用户点击“打印标签”按钮时，他会被发送到一个页面，其中只有标签出现在白色背景上并打开打印对话框。我的问题是关于如何“思考”这个标签的CSS，以便它在整个纸张宽度上打印，无论纸张是什么（美国，A4，......）。

我应该使用百分比来确定所有尺寸，盒子，边距，......的大小吗？ ems的字体？或点？ 是否应首先使用css重置？

这种css应用程序在网上有很好的资源吗？

更新：我使用浮动部分和百分比宽度制作，在普通纸上布局得很好。所以请考虑关闭这个问题。

Answer 1

我想诀窍是让布局尽可能流畅。并避免使用px作为衡量标准。这是一篇好文章：CSS Design: Going to Print

Answer 2

如果您的标签包含不同的数据部分，那么正确扩展所有内容可能会非常困难。

我将采用的方法是生成单个SVG图像并进行缩放。 SVG专为扩展而设计，而（X）HTML旨在根据分辨率重新流动内容。

SVG只是一些可以嵌入HTML中的xml，例如look here。

Answer 3

你应该避免使用position：absolute / fixed，float：left / right。

Pt最适合打印字体，但大部分时间并不重要。