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

Question

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

我应该使用百分比来衡量一切,盒子,边距......？ems的字体？或点？是否应首先使用css重置？

对于这种css应用程序,网上是否有一个很好的资源？

更新:我使用浮动部分和百分比宽度制作,在普通纸张上布局良好.所以请考虑这个问题.

Answer 1

如果您的标签包含不同的数据部分，那么正确缩放所有内容可能是一个相当大的挑战。

我的方法是生成一个 SVG 图像并对其进行缩放。SVG 设计用于缩放，而 (X)HTML 设计用于根据分辨率重新流动内容。

SVG 只是一些可以直接嵌入到 HTML 中的 xml，请在此处查看示例。