我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗？这似乎是在16个像素处计算出来的。
我的印象是，100%会以某种方式指代浏览器窗口的大小，但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面，都是16像素。
如何使站点上的文本与其容器相关？我尝试过使用它们，但这也无法扩展。
我的理由是，当你调整大小时，像我的菜单这样的东西会变得压扁，所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。（例如，在大型桌面上的菜单中，22px的效果非常好。向下移动到平板电脑宽度，16px更合适。）
我知道我可以添加断点，但我真的希望文本能够缩放并具有额外的断点，否则，我将以每100像素宽度减少数百个断点来控制文本。
当前回答
直接媒体查询似乎是一种更简单、更容易理解的解决方案，可以根据容器大小调整字体大小，而容器大小可能是动态的。
下面将根据容器的大小调整字体大小，无论容器是否缩放到视口的大小，或是否已达到其最大值。如果您有非100%宽的容器，可以相应地调整vw。
.container {
width: 100%;
max-width: 600px;
}
.headline {
font-size: 20vw;
}
.subhead {
font-size: 5vw;
}
@media (min-width:600px) {
.headline {
font-size: 120px;
}
.subhead {
font-size: 32px;
}
}
其他回答
这是一个纯CSS解决方案，您承认断点是必要的，但也希望文本缩放：
我知道我可以添加断点，但我真的希望文本能够缩放还有额外的断点，否则。。。。
以下是一种方法：
自定义财产媒体查询断点clamp（）（2022年2月的浏览器支持率为93%）计算（）
如果可以使用一个通用的缩放因子来控制每个屏幕最大宽度容器内的所有文本缩放，则只需按最大宽度缩放自定义属性，并将此因子应用于1计算。
基本设置如下所示：
:root {
--scaling-factor: 1
}
.parent {
font-size: 30px
}
.largest {
font-size: clamp(60%, calc(var(--scaling-factor) * 100%), 100%);
}
.middle {
font-size: clamp(60%, calc(var(--scaling-factor) * 85%), 100%);
}
.smallest {
font-size: clamp(60%, calc(var(--scaling-factor) * 70%), 100%);
}
然后嵌套您的媒体查询，如下所示（或断点所需的任何内容）：
@media (max-width: 1200px) {
:root {
--scaling-factor: 0.9
}
@media (max-width: 800px) {
:root {
--scaling-factor: 0.8
}
@media (max-width: 600px) {
:root {
--scaling-factor: 0.5 /* nope, because the font-size is floored at 60% thanks to clamp() */
}
}
}
}
这将最小化媒体查询标记。
优势
一个自定义属性控制所有缩放。。。无需为每个媒体断点添加多个声明使用clamp（）设置了字体大小的下限，这样可以确保文本永远不会太小（这里的下限是父字体大小的60%）
请查看此JSFiddle演示。调整窗口大小，直到宽度最小，段落的字体大小都相同。
100%是相对于基本字体大小的，如果您没有设置它，它将是浏览器的用户代理默认值。
为了获得您想要的效果，我将使用一段JavaScript代码来相对于窗口尺寸调整基本字体大小。
尝试http://simplefocus.com/flowtype/.这是我在我的网站上使用的，而且效果很好。
你可能正在寻找这样的东西：
http://jsfiddle.net/sijav/dGsC9/4/ http://fiddle.jshell.net/sijav/dGsC9/4/show/
我使用过flowtype，它工作得很好（不过它是JavaScript而不是纯CSS解决方案）：
$('body').flowtype({
minFont: 10,
maxFont: 40,
minimum: 500,
maximum: 1200,
fontRatio: 70
});
在CSS内部，尝试在底部添加此项，更改320像素的宽度，以适应设计开始中断的位置：
@media only screen and (max-width: 320px) {
body { font-size: 1em; }
}
然后根据需要以“px”或“em”表示字体大小。
