我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗？这似乎是在16个像素处计算出来的。
我的印象是，100%会以某种方式指代浏览器窗口的大小，但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面，都是16像素。
如何使站点上的文本与其容器相关？我尝试过使用它们，但这也无法扩展。
我的理由是，当你调整大小时，像我的菜单这样的东西会变得压扁，所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。（例如，在大型桌面上的菜单中，22px的效果非常好。向下移动到平板电脑宽度，16px更合适。）
我知道我可以添加断点，但我真的希望文本能够缩放并具有额外的断点，否则，我将以每100像素宽度减少数百个断点来控制文本。
当前回答
容器查询是CSS功能集（2022年末）的最新添加，使这一点变得简单明了。
它们允许您基于包含元素的大小应用样式，但也提供了一组用于容器查询宽度/高度的新CSS单元cqw/cqh。要使用它们，需要在要使用其大小的父元素上设置容器类型属性。下面是一个最小的示例：
＜div＞<p>Lorem ipsum dolor坐amet</p></div><style>第二部分{容器类型：内联大小；}p型{字体大小：5cqw；}</style>
随着父容器的增长，字体大小将平稳增加。在1000像素的容器宽度下，p字体大小将为1000像素/100*5=50像素。
容器类型可以是大小或内联大小。size跟踪容器的高度和宽度，允许您同时使用cqw和cqh。在网络上的大多数时间，高度是根据内容计算的，您只需指定宽度。为了节省浏览器的一些工作，您通常需要设置容器类型：inline-size；因此，浏览器只跟踪通常为宽度的内联维度（除非将写入模式设置为垂直）。
2022年下半年，浏览器对容器查询的支持快速增长，目前为75%（2023-01-01）。
其他回答
这对我有用：
我尝试根据设置“字体大小：10px”得到的宽度/高度来近似字体大小。基本上，这个想法是“如果我有20像素宽和11像素高的‘字体大小：10px’，那么计算50像素宽和30像素高的容器的最大字体大小是多少？”
答案是双重比例制：
{20:10=50:X，11:10=30:Y}={X=（10*50）/20，Y=（10*30）/11}
现在X是与宽度匹配的字体大小，Y是与高度匹配的字体尺寸；取最小值
function getMaxFontSizeApprox(el){
var fontSize = 10;
var p = el.parentNode;
var parent_h = p.offsetHeight ? p.offsetHeight : p.style.pixelHeight;
if(!parent_h)
parent_h = 0;
var parent_w = p.offsetHeight ? p.offsetWidth : p.style.pixelWidth;
if(!parent_w)
parent_w = 0;
el.style.fontSize = fontSize + "px";
var el_h = el.offsetHeight ? el.offsetHeight : el.style.pixelHeight;
if(!el_h)
el_h = 0;
var el_w = el.offsetHeight ? el.offsetWidth : el.style.pixelWidth;
if(!el_w)
el_w = 0;
// 0.5 is the error on the measure that JavaScript does
// if the real measure had been 12.49 px => JavaScript would have said 12px
// so we think about the worst case when could have, we add 0.5 to
// compensate the round error
var fs1 = (fontSize*(parent_w + 0.5))/(el_w + 0.5);
var fs2 = (fontSize*(parent_h) + 0.5)/(el_h + 0.5);
fontSize = Math.floor(Math.min(fs1,fs2));
el.style.fontSize = fontSize + "px";
return fontSize;
}
注意：函数的参数必须是span元素或小于其父元素的元素，否则如果子元素和父元素都具有相同的宽度/高度，则函数将失败。
看看我的代码。它使字体大小变小，以适应任何地方。
但我认为这并不能带来良好的用户体验
var containerWidth = $("#ui-id-2").width();
var items = $(".quickSearchAutocomplete .ui-menu-item");
var fontSize = 16;
items.each(function(){
// Displaying a value depends sometimes on your case. You may make it block or inline-table instead of inline-block or whatever value that make the div take overflow width.
$(this).css({"whiteSpace": "nowrap", "display": "inline-block"});
while ($(this).width() > containerWidth){
console.log("$(this).width()" + $(this).width() + "containerWidth" + containerWidth)
$(this).css("font-size", fontSize -= 0.5);
}
});
但如果容器不是视口（主体）呢？
真正的答案是transform属性允许您通过倾斜、旋转、平移或缩放来直观地操纵元素：
https://css-tricks.com/almanac/properties/t/transform/
有一种不使用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内部，尝试在底部添加此项，更改320像素的宽度，以适应设计开始中断的位置：
@media only screen and (max-width: 320px) {
body { font-size: 1em; }
}
然后根据需要以“px”或“em”表示字体大小。
