没有@media查询或javascript的小屏幕上更大的字体？

Question

@media查询是否有替代方法可以实现与屏幕大小成反比的字体大小？(例如:相反的效果2vw,在小屏幕上字体变小);

我的第一次尝试是除以视口宽度增量的值,但font-size: calc(10vw / 2);工作的,而font-size: calc(100 / 2vw);不幸的是没有工作.

我第一次尝试的codepen

Answer 1

你不能把一个px由视口宽度增加值,但你可以做到这一点的逆大小行为减少一个px由视口宽度的增加值.

例:
font-size: calc(40px - 2vw);

Codepen DEMO

或者,您可以使用与视口大小相关的其他3个单位:vh vmin和vmax.

例子:
font-size: calc(40px - 2vh);
font-size: calc(200px - 20vmin);
font-size: calc(200px - 20vmax);

vw - 相对于视口宽度的1%*;
vh - 相对于视口高度的1%*;
vmin - 相对于视口的*较小尺寸的1%;
vmax - 相对于视口的*维度的1%;

*viewport =浏览器窗口大小.

资料来源:w3schools