在我的应用程序中,我试图从 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
测量。
提前致谢。
最佳答案
您可以使用 viewport units比如下面这些:
- 1vw = 视口(viewport)宽度的 1%
- 1vh = 视口(viewport)高度的 1%
- 1vmin = 1vw 或 1vh,以较小者为准
- 1vmax = 1vw 或 1vh,取大者
因此,计算视口(viewport)中的大小并像这样使用:
font-size: 1.25vw;
如果您不想使用视口(viewport)单位而只想使用em
,那么计算大小如下:
如果基本字体大小为 10px,则 1em == 10px
。所以,1px = 1/10 = .1em
并使用 font-size 16px 然后 .1*16 = 1.6em
关于html - 如何计算从基本尺寸到视口(viewport)的 `font-size`?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31205353/