当窗口调整大小时，如何计算响应视图的点（pt）字体大小

Question

我尝试了下面的CSS

--max-font: 16;
--min-font: 12;
--responsive: calc((var(--min-font) * 1px) + (var(--max-font) - var(--min-font)) * ((100vw - 420px) / (1200 - 420)));
font-size: var(--responsive);

它在网站视图中显示良好，但在打印时字体变小。如何使用此公式以点（pt）格式计算字体大小？感谢。

Answer 1

首先，计算每个测量单位相对于第三个测量单位的宽度：

1px = 1/96th of 1 inch
1pt = 1/72nd of 1 inch

然后你可以利用这种差异来解决彼此之间的关系：

1pt = (1px * 96) / 72
1pt = 1.3**px

您可以计算字体大小...但为什么不只是替换 px与pt in你的代码？这比在飞行中进行计算要简单得多：

--max-font: 16;
--min-font: 12;
--responsive: calc((var(--min-font) * 1pt) + (var(--max-font) - var(--min-font)) * ((100vw - 420pt) / (1200 - 420)));
font-size: var(--responsive);