html - 如何计算从基本尺寸到视口(viewport)的 `font-size`？

Question

在我的应用程序中，我试图从 mock-up 设置 font-size。但我没有得到正确的结果。

我的模型宽度大小是:1280px 所以，我使用浏览器默认 font-size(16 ).现在我的 1280px 视口(viewport)有 62.5% 而我正好得到了 10px。

但是如何计算从这个基本尺寸到其他视口(viewport)的字体尺寸呢？

我尝试了 1600px 的视口(viewport)大小，如下所示:

1600/1280 = 1.25.. 所以 65.5/100 = 6.5 + 1.25 = 63.5% - 但我在 1600px 视口(viewport)中没有得到正确的结果。

从基址计算的正确方法是什么？

我在这里使用 em 测量。

提前致谢。

Answer 1

您可以使用 viewport units比如下面这些:

• 1vw = 视口(viewport)宽度的 1%
• 1vh = 视口(viewport)高度的 1%
• 1vmin = 1vw 或 1vh，以较小者为准
• 1vmax = 1vw 或 1vh，取大者

因此，计算视口(viewport)中的大小并像这样使用:

font-size: 1.25vw;

另见 can i use viewport units?

---

如果您不想使用视口(viewport)单位而只想使用em，那么计算大小如下:

如果基本字体大小为 10px，则 1em == 10px。所以，1px = 1/10 = .1em 并使用 font-size 16px 然后 .1*16 = 1.6em