css - 在没有 @media 查询或 javascript 的情况下，在较小的屏幕上使用较大的字体？

Question

@media 查询是否有替代方案来实现与屏幕尺寸成反比的字体大小？ (例如:2vw 的相反效果，在小屏幕上字体变小)；

我的第一次尝试是将一个值除以视口(viewport)宽度增量，但是 font-size: calc(10vw/2); 在 font-size: calc(100/2vw) 时有效; 不幸的是不起作用。

codepen of my first try

Answer 1

您不能将 px 值除以视口(viewport)宽度增量，但您可以通过减少 px 实现这种反尺寸行为视口(viewport)宽度增量的值。

示例:
字体大小:calc(40px - 2vw);

Codepen DEMO

或者，您可以使用与视口(viewport)大小相关的其他 3 个单位:vh vmin 和 vmax。

示例:
字体大小:calc(40px - 2vh);
字体大小:calc(200px - 20vmin);
字体大小:calc(200px - 20vmax);

vw - Relative to 1% of the width of the viewport*;
vh - Relative to 1% of the height of the viewport*;
vmin - Relative to 1% of viewport's* smaller dimension;
vmax - Relative to 1% of viewport's* larger dimension;

*viewport = the browser window size.

Source: w3schools