css - 将移动 dp 字体大小转换为桌面 px 值

Question

我知道，我知道 - 我不应该在我的 css 中使用 px 来指定字体大小。不过我有一个借口。

我正在编写一个基于浏览器的编辑器，旨在以可视化方式创建移动内容。我有一个固定宽度的 800*600 像素“ Canvas ”，代表移动设备横向视口(viewport)上的可见内容，以及围绕它的一堆工具栏(有点像 Photoshop)。

有一种 JSON 格式，我的编辑器从中读取并保存到它，代表移动内容。该 JSON 然后由移动应用程序解释并显示适当的内容。

在这种格式中，字体大小被指定为以 dp 为单位的整数。问题:如何转换该字体大小以显示在我的桌面 Web 应用程序中(知道我的“ Canvas ”是 80​​0*600 像素)？

我发现了一种获取桌面浏览器 PPI 的 hacky 方法，不确定这是否有帮助。

Answer 1

你可以使用 em 而不是使用 px 单位的字体大小，这样它就可以在桌面上的所有设备和浏览器上工作