我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗？这似乎是在16个像素处计算出来的。
我的印象是，100%会以某种方式指代浏览器窗口的大小，但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面，都是16像素。
如何使站点上的文本与其容器相关？我尝试过使用它们，但这也无法扩展。
我的理由是，当你调整大小时，像我的菜单这样的东西会变得压扁，所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。（例如，在大型桌面上的菜单中，22px的效果非常好。向下移动到平板电脑宽度，16px更合适。）
我知道我可以添加断点，但我真的希望文本能够缩放并具有额外的断点，否则，我将以每100像素宽度减少数百个断点来控制文本。
当前回答
如果要将其放入特定容器（如div）中，请使用：
width: max-content;
调整字体大小也有很大帮助，例如字体大小：75%。
其他回答
有一种不使用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/
功能如下：
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 flex属性的答案，但它也非常有用。
这个呢？将父级的字体大小设置为等于其宽度，然后使用文本元素字体大小的百分比。
.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>
let textElement=document.getElementById（'text1'）；let parentElement=textElement.parentElement；const parentClientHeight=parentElement.clientHeight；const parentClientWidth=parentElement.clientWidth；textElement.style.padding=“未设置”；textElement.style.margin=“自动”；let fontSize=parentClientHeight；设minFS＝3，maxFS=fontSize；while（fontSize！=minFS）{textElement.style.fontSize=`${fontSize｝px`；如果(parentElement.scrollHeight<=parentClientHeight&&parentElement.scrollWidth<=parentClientWidth) {minFS=字体大小；}其他{maxFS=fontSize；}fontSize=数学楼层（（minFS+maxFS）/2）；}textElement.style.fontSize=`${minFS｝像素'；<div style=“高度：200px；宽度：300px；”><div id='text1'>测验</div></div>
