我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗？这似乎是在16个像素处计算出来的。
我的印象是，100%会以某种方式指代浏览器窗口的大小，但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面，都是16像素。
如何使站点上的文本与其容器相关？我尝试过使用它们，但这也无法扩展。
我的理由是，当你调整大小时，像我的菜单这样的东西会变得压扁，所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。（例如，在大型桌面上的菜单中，22px的效果非常好。向下移动到平板电脑宽度，16px更合适。）
我知道我可以添加断点，但我真的希望文本能够缩放并具有额外的断点，否则，我将以每100像素宽度减少数百个断点来控制文本。
当前回答
对于动态文本，此插件非常有用：
http://freqdec.github.io/slabText/
只需添加CSS：
.slabtexted .slabtext
{
display: -moz-inline-box;
display: inline-block;
white-space: nowrap;
}
.slabtextinactive .slabtext
{
display: inline;
white-space: normal;
font-size: 1em !important;
letter-spacing: inherit !important;
word-spacing: inherit !important;
*letter-spacing: normal !important;
*word-spacing: normal !important;
}
.slabtextdone .slabtext
{
display: block;
}
还有脚本：
$('#mydiv').slabText();
其他回答
这个呢？将父级的字体大小设置为等于其宽度，然后使用文本元素字体大小的百分比。
.element {
width: 400px;
font-size: 400px; /* equal to width */
}
.text {
width: 10%; /* will be 40px */
}
我发现这非常简单，特别是当你处理图标时，但也适用于文本。
/*造型的开始*/* {边距：0；填充：0；框大小调整：边框框；}.box格式{显示：块；背景：矢车菊蓝；高度：最大含量；边距底部：32px；}/*样式结束*/.方框p{字体大小：20%；}<div class=“box”style=“width:400px；font-size:400px”><p>文本</p></div><div class=“box”style=“width:128px；font-size:128px”><p>文本</p></div><div class=“box”style=“width:10vw；font-size:10vw”><p>文本</p></div><div class=“box”style=“width:64px；font-size:64px”><p>文本</p></div>
你可能正在寻找这样的东西：
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
});
在我的一个项目中，我使用vw和vh之间的“混合”来根据我的需要调整字体大小，例如：
font-size: calc(3vw + 3vh);
我知道这不能回答OP的问题，但也许它可以解决其他人的问题。
对于动态文本，此插件非常有用：
http://freqdec.github.io/slabText/
只需添加CSS：
.slabtexted .slabtext
{
display: -moz-inline-box;
display: inline-block;
white-space: nowrap;
}
.slabtextinactive .slabtext
{
display: inline;
white-space: normal;
font-size: 1em !important;
letter-spacing: inherit !important;
word-spacing: inherit !important;
*letter-spacing: normal !important;
*word-spacing: normal !important;
}
.slabtextdone .slabtext
{
display: block;
}
还有脚本：
$('#mydiv').slabText();
使用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公司
