我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗？这似乎是在16个像素处计算出来的。
我的印象是，100%会以某种方式指代浏览器窗口的大小，但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面，都是16像素。
如何使站点上的文本与其容器相关？我尝试过使用它们，但这也无法扩展。
我的理由是，当你调整大小时，像我的菜单这样的东西会变得压扁，所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。（例如，在大型桌面上的菜单中，22px的效果非常好。向下移动到平板电脑宽度，16px更合适。）
我知道我可以添加断点，但我真的希望文本能够缩放并具有额外的断点，否则，我将以每100像素宽度减少数百个断点来控制文本。
当前回答
使用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的方法可以做到这一点！
您可以使用内联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方法应该是这样的（假设包装器最大宽度为1000像素）
.specialText{
font-size: 2.4vw;
}
@media only screen and (min-width: 1000px) {
.specialText {
width: 24px;
}
}
因此，它可以自动调整大小，以适应任何小于容器最大宽度的屏幕，当屏幕更宽时（几乎所有台式机和笔记本电脑），它可以固定大小。
纯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变得聪明。此解决方案还可能存在可访问性问题。
我不建议在任何地方使用。但它在某些情况下应该相当有用。
直接媒体查询似乎是一种更简单、更容易理解的解决方案，可以根据容器大小调整字体大小，而容器大小可能是动态的。
下面将根据容器的大小调整字体大小，无论容器是否缩放到视口的大小，或是否已达到其最大值。如果您有非100%宽的容器，可以相应地调整vw。
.container {
width: 100%;
max-width: 600px;
}
.headline {
font-size: 20vw;
}
.subhead {
font-size: 5vw;
}
@media (min-width:600px) {
.headline {
font-size: 120px;
}
.subhead {
font-size: 32px;
}
}
