我很难理解字体缩放。

我目前有一个字体大小为100%的网站。但这是100%的吗?这似乎是在16个像素处计算出来的。

我的印象是,100%会以某种方式指代浏览器窗口的大小,但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面,都是16像素。

如何使站点上的文本与其容器相关?我尝试过使用它们,但这也无法扩展。

我的理由是,当你调整大小时,像我的菜单这样的东西会变得压扁,所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。(例如,在大型桌面上的菜单中,22px的效果非常好。向下移动到平板电脑宽度,16px更合适。)

我知道我可以添加断点,但我真的希望文本能够缩放并具有额外的断点,否则,我将以每100像素宽度减少数百个断点来控制文本。


当前回答

始终使元素具有此属性:

JavaScript:element.style.fontSize=“100%”;

or

CSS:style=“font-size:100%;”

当您进入全屏时,您应该已经计算了一个比例变量(比例>1或比例=1)。然后,在全屏幕上:

document.body.style.fontSize = (scale * 100) + "%";

它只需要很少的代码就可以很好地工作。

其他回答

使用CSS变量

还没有人提到CSS变量,这种方法对我来说效果最好,所以:

假设你的页面上有一个列,它是移动用户屏幕宽度的100%,但最大宽度为800px,所以在桌面上,列的两边都有一些空间。将此置于页面顶部:

<script> document.documentElement.style.setProperty('--column-width', Math.min(window.innerWidth, 800)+'px'); </script>

现在您可以使用该变量(而不是内置的vw单元)来设置字体的大小。例如。

p {
  font-size: calc( var(--column-width) / 100 );
}

这不是一种纯CSS方法,但它非常接近。

始终使元素具有此属性:

JavaScript:element.style.fontSize=“100%”;

or

CSS:style=“font-size:100%;”

当您进入全屏时,您应该已经计算了一个比例变量(比例>1或比例=1)。然后,在全屏幕上:

document.body.style.fontSize = (scale * 100) + "%";

它只需要很少的代码就可以很好地工作。

您可以插入窗口宽度的字体大小:

font-size: calc(
      ${minFontSizeInPixel} *
        (
          1px -
            clamp(
              0px,
              (100vw - ${minWindowWidth}px) /
                (${maxWindowWidth} - ${minWindowWidth}),
              1px
            )
        ) + ${maxFontSizeInPixel} *
        clamp(
          0px,
          (100vw - ${minWindowWidth}px) /
            (${maxWindowWidth} - ${minWindowWidth}),
          1px
        )
    );

如果要将其放入特定容器(如div)中,请使用:

width: max-content;

调整字体大小也有很大帮助,例如字体大小:75%。

我刚刚创建了一个演示如何做到这一点。它使用transform:scale()来实现这一点,并使用一些监视元素大小调整的JS。非常适合我的需要。