我很难理解字体缩放。

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

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

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

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

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


当前回答

在CSS内部,尝试在底部添加此项,更改320像素的宽度,以适应设计开始中断的位置:

@media only screen and (max-width: 320px) {
  body { font-size: 1em; }
}

然后根据需要以“px”或“em”表示字体大小。

其他回答

let textElement=document.getElementById('text1');let parentElement=textElement.parentElement;const parentClientHeight=parentElement.clientHeight;const parentClientWidth=parentElement.clientWidth;textElement.style.padding=“未设置”;textElement.style.margin=“自动”;let fontSize=parentClientHeight;设minFS=3,maxFS=fontSize;while(fontSize!=minFS){textElement.style.fontSize=`${fontSize}px`;如果(parentElement.scrollHeight<=parentClientHeight&&parentElement.scrollWidth<=parentClientWidth) {minFS=字体大小;}其他{maxFS=fontSize;}fontSize=数学楼层((minFS+maxFS)/2);}textElement.style.fontSize=`${minFS}像素';<div style=“高度:200px;宽度:300px;”><div id='text1'>测验</div></div>

100%是相对于基本字体大小的,如果您没有设置它,它将是浏览器的用户代理默认值。

为了获得您想要的效果,我将使用一段JavaScript代码来相对于窗口尺寸调整基本字体大小。

使用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方法,但它非常接近。

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

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

在CSS内部,尝试在底部添加此项,更改320像素的宽度,以适应设计开始中断的位置:

@media only screen and (max-width: 320px) {
  body { font-size: 1em; }
}

然后根据需要以“px”或“em”表示字体大小。