我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗？这似乎是在16个像素处计算出来的。
我的印象是，100%会以某种方式指代浏览器窗口的大小，但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面，都是16像素。
如何使站点上的文本与其容器相关？我尝试过使用它们，但这也无法扩展。
我的理由是，当你调整大小时，像我的菜单这样的东西会变得压扁，所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。（例如，在大型桌面上的菜单中，22px的效果非常好。向下移动到平板电脑宽度，16px更合适。）
我知道我可以添加断点，但我真的希望文本能够缩放并具有额外的断点，否则，我将以每100像素宽度减少数百个断点来控制文本。
当前回答
有一种不使用JavaScript的方法可以做到这一点！
您可以使用内联SVG图像。如果SVG是内联的，则可以在SVG上使用CSS。您必须记住，使用此方法意味着您的SVG图像将响应其容器大小。
尝试使用以下解决方案。。。
HTML
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.96 358.98" >
<text>SAVE $500</text>
</svg>
</div>
CSS
div {
width: 50%; /* Set your container width */
height: 50%; /* Set your container height */
}
svg {
width: 100%;
height: auto;
}
text {
transform: translate(40px, 202px);
font-size: 62px;
fill: #000;
}
例子：https://jsfiddle.net/k8L4xLLa/32/
想要更华丽的东西吗？
SVG图像还允许您对形状和垃圾进行处理。看看这个可扩展文本的好用例。。。
https://jsfiddle.net/k8L4xLLa/14/
其他回答
如果容器不是主体，CSS技巧将覆盖“将文本适配到容器”中的所有选项。
如果容器是主体，则要查找的是视口百分比长度：
视口百分比长度与初始包含块的大小相关。当初始包含块的高度或宽度更改时，将相应地缩放它们。但是，当根元素上的溢出值为auto时，假设不存在任何滚动条。
值为：
vw（视口宽度的%）vh（视口高度的%）vi（根元素内联轴方向上视口大小的1%）vb（根元素块轴方向上视口大小的1%）vmin（vw或vh中较小的一个）vmax（较大或vw或vh）
1v*等于初始包含块的1%。
使用它看起来像这样：
p {
font-size: 4vw;
}
如您所见，当视口宽度增加时，字体大小也会增加，而无需使用媒体查询。
这些值是一个大小调整单位，就像px或em一样，因此它们也可以用于调整其他元素的大小，例如宽度、边距或填充。
浏览器支持非常好，但您可能需要一个后备方案，例如：
p {
font-size: 16px;
font-size: 4vw;
}
查看支持统计信息：http://caniuse.com/#feat=viewport-单位。
此外，请查看CSS技巧以获得更广泛的外观：视口大小的版式
这是一篇关于设置最小/最大尺寸并对尺寸进行更多控制的好文章：精确控制响应式印刷
下面是一篇关于使用calc（）设置大小以使文本填充视口的文章：http://codepen.io/CrocoDillon/pen/fBJxu
此外，请查看这篇文章，它使用了一种称为“熔化引线”的技术来调整线条高度。CSS中的熔融铅
这可能不太实用，但如果您希望字体是父级的直接函数，而不需要任何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都是我自定义的点击拖动功能。
使用CSS变量
还没有人提到CSS变量，这种方法对我来说效果最好，所以：
假设你的页面上有一个列，它是移动用户屏幕宽度的100%，但最大宽度为800px，所以在桌面上，列的两边都有一些空间。将此置于页面顶部：
<script> document.documentElement.style.setProperty('--column-width', Math.min(window.innerWidth, 800)+'px'); </script>
现在您可以使用该变量（而不是内置的vw单元）来设置字体的大小。例如。
p {
font-size: calc( var(--column-width) / 100 );
}
这不是一种纯CSS方法，但它非常接近。
作为JavaScript回退（或您唯一的解决方案），您可以使用我的jQueryScalem插件，它允许您通过传递引用选项相对于父元素（容器）进行缩放。
在CSS内部，尝试在底部添加此项，更改320像素的宽度，以适应设计开始中断的位置：
@media only screen and (max-width: 320px) {
body { font-size: 1em; }
}
然后根据需要以“px”或“em”表示字体大小。
