我很难理解字体缩放。

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

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

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

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

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


当前回答

在我的一个项目中,我使用vw和vh之间的“混合”来根据我的需要调整字体大小,例如:

font-size: calc(3vw + 3vh);

我知道这不能回答OP的问题,但也许它可以解决其他人的问题。

其他回答

尝试使用fitText插件,因为Viewport大小并不能解决这个问题。

只需添加库:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

并通过设置文本系数来更改字体大小以正确:

$("#text_div").fitText(0.8);

您可以设置文本的最大值和最小值:

$("#text_div").fitText(0.8, { minFontSize: '12px', maxFontSize: '36px' });

这个问题有一个大的哲学。

最简单的方法是给body指定一个特定的字体大小(我建议10),然后所有其他元素的字体都是em或rem。我会给你一个例子来理解这些单位。Em始终相对于其父级:

body{font-size: 10px;}
.menu{font-size: 2em;} /* That means 2*10 pixels  = 20 pixels */
.menu li{font-size: 1.5em;} /* That means 1.5*20 pixels = 30 pixels */

Rem始终相对于身体:

body{font-size: 10px;}
.menu{font-size: 2rem;} /* That means 2*10 pixels = 20 pixels */
.menu li{font-size: 1.5rem;} /* that means 1.5*10 pixels = 15 pixels */

然后,您可以创建一个脚本,该脚本将根据容器宽度修改字体大小。但这不是我要推荐的。例如,在一个900像素宽的容器中,你会有一个字体大小为12像素的p元素。根据你的想法,它将变成一个300像素宽的容器,字体大小为4像素。必须有一个下限。

其他解决方案是媒体查询,这样您就可以为不同的宽度设置字体。

但我推荐的解决方案是使用一个JavaScript库来帮助您实现这一点。还有到目前为止我找到的fitext.js。

我看不到任何关于CSS flex属性的答案,但它也非常有用。

如果这对任何人都有帮助的话,本线程中的大多数解决方案都是将文本包装成多行,形式为e。

但后来我发现了这一点,它奏效了:

https://github.com/chunksnbits/jquery-quickfit

示例用法:

$('.someText').quickfit({max:50,公差:.4})

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

width: max-content;

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