我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗？这似乎是在16个像素处计算出来的。
我的印象是，100%会以某种方式指代浏览器窗口的大小，但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面，都是16像素。
如何使站点上的文本与其容器相关？我尝试过使用它们，但这也无法扩展。
我的理由是，当你调整大小时，像我的菜单这样的东西会变得压扁，所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。（例如，在大型桌面上的菜单中，22px的效果非常好。向下移动到平板电脑宽度，16px更合适。）
我知道我可以添加断点，但我真的希望文本能够缩放并具有额外的断点，否则，我将以每100像素宽度减少数百个断点来控制文本。
当前回答
尝试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
});
100%是相对于基本字体大小的，如果您没有设置它，它将是浏览器的用户代理默认值。
为了获得您想要的效果，我将使用一段JavaScript代码来相对于窗口尺寸调整基本字体大小。
对于动态文本，此插件非常有用：
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();
这可能不太实用，但如果您希望字体是父级的直接函数，而不需要任何JavaScript侦听/循环（interval）来读取div/页面的大小，那么有一种方法可以做到。Iframes。
iframe中的任何内容都会将iframe的大小视为视口的大小。因此，诀窍是创建一个iframe，其宽度是您希望文本达到的最大宽度，其高度等于特定文本的最大高度*纵横比。
抛开视口单位不能与文本的父单位一起出现的限制（如中所示，具有与其他所有单位相同的%大小），视口单位确实提供了一个非常强大的工具：能够获得最小/最大尺寸。你不能在其他地方这样做-你不能说。。。使这个div的高度等于父对象的宽度。
也就是说，诀窍是使用vmin，并设置iframe大小，当高度是限制维度时，[fract]*总高度是一个好的字体大小，而当宽度是限制维度的时候，[fract]*总宽度。这就是为什么高度必须是宽度和纵横比的乘积。
对于我的特定示例
.main iframe{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: calc(3.5 * 100%);
background: rgba(0, 0, 0, 0);
border-style: none;
transform: translate3d(-50%, -50%, 0);
}
这种方法的一个小烦恼是，您必须手动设置iframe的CSS。如果您附加整个CSS文件，这将占用许多文本区域的大量带宽。所以，我所做的是直接从CSS中附加我想要的规则。
var rule = document.styleSheets[1].rules[4];
var iDoc = document.querySelector('iframe').contentDocument;
iDoc.styleSheets[0].insertRule(rule.cssText);
您可以编写一个小函数来获取CSS规则/所有影响文本区域的CSS规则。
如果没有一些循环/聆听JavaScript，我想不出另一种方法。真正的解决方案是让浏览器提供一种根据父容器缩放文本的方式，并提供相同的vmin/vmax类型功能。
JSFiddle：https://jsfiddle.net/0jr7rrgm/3/（单击一次可将红色方块锁定在鼠标上，再次单击可释放）
大部分JavaScript都是我自定义的点击拖动功能。
我的问题类似，但与标题内的文本缩放有关。我尝试了Fit Font，但我需要切换压缩器以获得任何结果，因为它解决了一个稍微不同的问题，就像文本流一样。
所以我写了我自己的小插件，它减小了字体大小以适应容器，假设你有溢出：隐藏和空白：nowrap，这样即使将字体减小到最小也不允许显示完整的标题，它也会切断它可以显示的内容。
(function($) {
// Reduces the size of text in the element to fit the parent.
$.fn.reduceTextSize = function(options) {
options = $.extend({
minFontSize: 10
}, options);
function checkWidth(em) {
var $em = $(em);
var oldPosition = $em.css('position');
$em.css('position', 'absolute');
var width = $em.width();
$em.css('position', oldPosition);
return width;
}
return this.each(function(){
var $this = $(this);
var $parent = $this.parent();
var prevFontSize;
while (checkWidth($this) > $parent.width()) {
var currentFontSize = parseInt($this.css('font-size').replace('px', ''));
// Stop looping if min font size reached, or font size did not change last iteration.
if (isNaN(currentFontSize) || currentFontSize <= options.minFontSize ||
prevFontSize && prevFontSize == currentFontSize) {
break;
}
prevFontSize = currentFontSize;
$this.css('font-size', (currentFontSize - 1) + 'px');
}
});
};
})(jQuery);
