在模拟纸张交互的Web应用程序的CSS中使用cm/mm是一种好的实践吗？

Question

我正在构建一个与文档交互并用于后期打印的网络应用程序。在某些方面类似于Google Docs。我考虑在文档页面的CSS中使用cm / mm，因为这将有助于文档生成。例如：

// A4 size
.page {
   width: 210mm;
   height: 297mm;
   margin: 2cm 5cm; 
}

<div class="page">
  ...
</div>

遵循这种方法的主要问题是什么？

- Rui Carneiro

Answer 1

W3C在CSS单位方面有一篇很好的文章。 特别是：

cm：不推荐用于屏幕/ 建议用于打印

所谓的绝对单位（cm，mm，in，pt和pc）在CSS中与其他任何地方意义相同。 以任何这些单位表示的长度将显示为确切的大小（在硬件和软件精度范围内）。 它们不建议在屏幕上使用，因为屏幕尺寸差异很大。 大屏幕可能是60厘米（24英寸），小型便携式屏幕可能只有8厘米。 您也不会从同样的距离看待它们。

唯一可以使用pt（或cm或in）设置字体大小的地方是打印样式表，在那里如果您需要确保打印字体的确切大小。 但即使在那里，使用默认字体大小通常更好。

- Danny Beckett

---

这篇文章非常好，我已经读过了。但我的问题是，我不仅会在打印时使用厘米/毫米（例如@media print），而且会在整个应用程序中使用它们。但由于我希望屏幕和打印输出完全相同，所以我怀疑采用厘米/毫米可能不是最佳选择。 - Rui Carneiro

那么你建议页面的宽度和高度应该是多少呢？我们知道dinA4纸张的高度为297毫米。将其转换为像素，因为“不推荐使用厘米”，似乎非常奇怪。 - phil294

@Blauhirn 可能需要一些相关的东西，比如 height: 100%; width: 100%，然后再为打印设置一个单独的样式表。 - Danny Beckett

Rui说他正在创建类似于Google文档的东西（如果您喜欢，可以是打印预览应用程序）。因此，他可能需要在浏览器中查看正确的页面尺寸。例如，这样您就可以看到剩余多少空间可供输入。我真的想不出还有其他方法，除了在此处使用厘米尺寸。 - phil294

@Blauhirn 我认为这种方法存在的问题是：假设我们正在复制一个电子表格程序。我们决定将列宽设置为2英寸。在分辨率“正常”的PC上，这很好 - 应用程序可能会显示大约15列。但是，在手机上，单个列将填满整个屏幕。此外，应用程序在不同分辨率下的外观和行为也会有所不同。最好坚持使用％并为打印准备单独的样式表。我唯一能想到在Web上使用cm / in的情况是对于某些长度关键的内容，例如标尺应用程序或类似应用... 在我看来。 - Danny Beckett