我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗？这似乎是在16个像素处计算出来的。
我的印象是，100%会以某种方式指代浏览器窗口的大小，但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面，都是16像素。
如何使站点上的文本与其容器相关？我尝试过使用它们，但这也无法扩展。
我的理由是，当你调整大小时，像我的菜单这样的东西会变得压扁，所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。（例如，在大型桌面上的菜单中，22px的效果非常好。向下移动到平板电脑宽度，16px更合适。）
我知道我可以添加断点，但我真的希望文本能够缩放并具有额外的断点，否则，我将以每100像素宽度减少数百个断点来控制文本。
当前回答
功能如下：
document.body.setScaledFont = function(f) {
var s = this.offsetWidth, fs = s * f;
this.style.fontSize = fs + '%';
return this
};
然后将所有文档子元素的字体大小转换为em或%。
然后向代码中添加类似的内容以设置基本字体大小。
document.body.setScaledFont(0.35);
window.onresize = function() {
document.body.setScaledFont(0.35);
}
http://jsfiddle.net/0tpvccjt/
其他回答
这是一个纯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演示。调整窗口大小，直到宽度最小，段落的字体大小都相同。
此web组件更改字体大小，使内部文本宽度与容器宽度匹配。查看演示。
您可以这样使用：
<full-width-text>Lorem Ipsum</full-width-text>
100%是相对于基本字体大小的，如果您没有设置它，它将是浏览器的用户代理默认值。
为了获得您想要的效果，我将使用一段JavaScript代码来相对于窗口尺寸调整基本字体大小。
在CSS内部，尝试在底部添加此项，更改320像素的宽度，以适应设计开始中断的位置：
@media only screen and (max-width: 320px) {
body { font-size: 1em; }
}
然后根据需要以“px”或“em”表示字体大小。
使用vw，em&co.确实有效，但IMO始终需要人为的微调。
这是我刚刚根据@tnt-rox的回答编写的一个脚本，它试图使人类的触摸自动化：
$（'#controller'）.click（function（）{$（'h2'）.each（函数）{变量$el=$（此），max=$el.get（0），el=空;最大值=最大值? 最大偏移宽度: 320;$el.css({“font size”：“1em”，“display”：“inline”，});el=$el.get（0）；el.get_float=函数（）{变量fs=0;if（this.style&&this.style.fontSize）{fs=parseFloat（this.style.fontSize.replace（/（[\d\.]+）em/g，'$1'））；}返回fs；};el.bigger=函数（）{this.style.fontSize=（this.get_float（）+0.1）+'em'；};而（el.offsetWidth<max）{el.bigger（）；}//完成触摸。$el.css({“字体大小”：（（el.get_float（）-0.1）+'em'），'线条高度'：'正常'，'显示'：''，});}); // 结束（每个）}); // 结束（字体缩放测试）第二部分{宽度：50%；背景色：番茄；字体系列：'Arial'；}氢气{空白：nowrap；}h2：第n个孩子（2）{字体样式：斜体；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js“></script><input type=“button”id=“controller”value=“Apply”/>＜div＞<h2>Lorem ipsum dolor公司</h2><h2>测试字符串</h2><h2>甜蜜串联</h2><h2>字体缩放比例</h2></div>
它基本上将字体大小减小到1em，然后开始递增0.1，直到达到最大宽度。
JSFiddle公司
