我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗？这似乎是在16个像素处计算出来的。
我的印象是，100%会以某种方式指代浏览器窗口的大小，但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面，都是16像素。
如何使站点上的文本与其容器相关？我尝试过使用它们，但这也无法扩展。
我的理由是，当你调整大小时，像我的菜单这样的东西会变得压扁，所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。（例如，在大型桌面上的菜单中，22px的效果非常好。向下移动到平板电脑宽度，16px更合适。）
我知道我可以添加断点，但我真的希望文本能够缩放并具有额外的断点，否则，我将以每100像素宽度减少数百个断点来控制文本。
当前回答
纯CSS在某种程度上是可能的。
.自动调整文本大小{content:url（“data:image/svg+xml；utf8，<svg xmlns='http://www.w3.org/2000/svg'version='1.1'height='1.3em'width='10em'><text x='0'y='0.9em'fill='red'>这里是调整大小的文本</text></svg>“）；背景色：rgba（0,0,0,0.06）；动画：成长2s无限交替两者；}@关键帧增长{来自｛width:100px；｝到｛width:300px；｝}<div class=“自动调整文本大小”></div>
解释
内容规则设置元素的内容，它可以是图像的URL，包括SVG图像。SVG图像可以包含文本，因此基本上您有一个带有文本的背景图像，该图像根据其父图像的大小调整大小。您也可以使用background image属性，但与内容不同，它不会影响元素的布局，因此您需要定义父元素的大小。
这种方法的问题是，您需要定义SVG中文本的颜色、大小和位置。他们不会从父母那里继承。但你可以用Sass和Less变得聪明。此解决方案还可能存在可访问性问题。
我不建议在任何地方使用。但它在某些情况下应该相当有用。
其他回答
但如果容器不是视口（主体）呢？
真正的答案是transform属性允许您通过倾斜、旋转、平移或缩放来直观地操纵元素：
https://css-tricks.com/almanac/properties/t/transform/
我的问题类似，但与标题内的文本缩放有关。我尝试了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);
如果这对任何人都有帮助的话，本线程中的大多数解决方案都是将文本包装成多行，形式为e。
但后来我发现了这一点，它奏效了：
https://github.com/chunksnbits/jquery-quickfit
示例用法：
$（'.someText'）.quickfit（｛max:50，公差：.4｝）
带有calc（）、CSS单位和数学的纯CSS解决方案
这并不是OP所要求的，但可能会让某人过得很愉快。这个答案并不容易，需要在开发者端进行一些研究。
我终于得到了一个纯CSS解决方案，它使用了不同单位的calc（）。您需要对公式有一些基本的数学理解，才能计算出calc（）的表达式。
当我完成这项工作时，我必须得到一个全页面宽度的响应标头，在DOM中填充一些父级。我将在这里使用我的值，用你自己的值替换它们。
数学
您需要：
在某些视口中，比例调整得很好。我使用了320个像素，因此我得到了24个像素高和224个像素宽，因此比率为9.333…或28/3容器宽度，我有填充物：3em和全宽，因此达到100wv-2*3em
X是容器的宽度，因此请用自己的表达式替换它，或调整值以获得整页文本。R是你的比率。您可以通过调整某些视口中的值、检查元素宽度和高度并将其替换为自己的值来获得它。此外，它是宽度/高度；）
x = 100vw - 2 * 3em = 100vw - 6em
r = 224px/24px = 9.333... = 28 / 3
y = x / r
= (100vw - 6em) / (28 / 3)
= (100vw - 6em) * 3 / 28
= (300vw - 18em) / 28
= (75vw - 4.5rem) / 7
砰！成功了！我写了
font-size: calc((75vw - 4.5rem) / 7)
到我的标题，它在每个视口中都调整得很好。
但它是如何工作的？
我们需要一些常量。100vw表示视口的全宽，我的目标是建立带有一些填充的全宽标头。
比率。在一个视口中获得一个宽度和高度，我就得到了一个可以使用的比例，而通过这个比例，我知道在其他视口宽度中的高度应该是多少。用手计算它们需要大量的时间，至少需要大量的带宽，所以这不是一个好答案。
结论
我想知道为什么没有人知道这一点，有些人甚至告诉我，这是不可能修补CSS的。我不喜欢在调整元素时使用JavaScript，所以我不接受JavaScript（并忘记jQuery）的答案而不进行更多挖掘。总而言之，这很好，这是在网站设计中实现纯CSS的一步。
我很抱歉，我的文本中有任何不寻常的惯例，我不是英语母语，而且我对编写Stack Overflow答案也很陌生。
还应该注意的是，我们在一些浏览器中有邪恶的滚动条。例如，当使用Firefox时，我注意到100vw表示视口的全宽，在滚动条下延伸（内容无法扩展。
如果问题是宽屏桌面上的字体太大，我认为最简单的CSS方法应该是这样的（假设包装器最大宽度为1000像素）
.specialText{
font-size: 2.4vw;
}
@media only screen and (min-width: 1000px) {
.specialText {
width: 24px;
}
}
因此，它可以自动调整大小，以适应任何小于容器最大宽度的屏幕，当屏幕更宽时（几乎所有台式机和笔记本电脑），它可以固定大小。
