Question

在我的应用中，我正在尝试从font-size设置mock-up。但我得不到正确的结果。

我的模型宽度大小为：1280px因此，我使用浏览器默认10px（16）重置font-size的css。现在，我的1280px视图端口已62.5%，我的确是10px。

但是如何计算从这个基本大小到其他视图端口的字体大小？

我尝试了1600px的视图端口大小，如下所示：

1600/1280 = 1.25.. so 65.5/100 = 6.5 + 1.25 = 63.5% - 但我在1600px查看端口中找不到正确的结果。

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

我在这里使用em测量。

先谢谢。

Answer 1

您可以使用viewport units，例如以下内容：

1vw =视口宽度的1％
1vh =视口高度的1％
1vmin = 1vw或1vh，取较小者
1vmax = 1vw或1vh，取较大者

因此，在视口中计算大小并使用如下：

font-size: 1.25vw;

另见can i use viewport units?

如果您不想使用视口单元并只使用em，请计算如下大小：

如果base font-size是10px，那么1em == 10px。所以，1px = 1/10 = .1em并使用font-size 16px然后.1*16 = 1.6em

Answer 2

我这样计算它对我有用！

actual view port size = 1280

required view port size = 1600

variation = 1600/1280 = 1.25;

Base percent(1280) = 62.5 / 100 = 0.625

variation calulate = 1.25 * 0.65 = 0.78125 * 10 = 7.8125;

view port 1600 required = 62.5 + 7.8125 = 70.3125% as a base font.

如何计算从基本大小到视口的`font-size`？

2 个答案: