基于容器大小的字体缩放

我很难理解字体缩放。

我目前有一个字体大小为100%的网站。但这是100%的吗？这似乎是在16个像素处计算出来的。

我的印象是，100%会以某种方式指代浏览器窗口的大小，但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面，都是16像素。

如何使站点上的文本与其容器相关？我尝试过使用它们，但这也无法扩展。

我的理由是，当你调整大小时，像我的菜单这样的东西会变得压扁，所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。（例如，在大型桌面上的菜单中，22px的效果非常好。向下移动到平板电脑宽度，16px更合适。）

我知道我可以添加断点，但我真的希望文本能够缩放并具有额外的断点，否则，我将以每100像素宽度减少数百个断点来控制文本。

当前回答

我看不到任何关于CSS flex属性的答案，但它也非常有用。

其他回答

使用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插件，它允许您通过传递引用选项相对于父元素（容器）进行缩放。

功能如下：

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/

100%是相对于基本字体大小的，如果您没有设置它，它将是浏览器的用户代理默认值。

为了获得您想要的效果，我将使用一段JavaScript代码来相对于窗口尺寸调整基本字体大小。

此web组件更改字体大小，使内部文本宽度与容器宽度匹配。查看演示。

您可以这样使用：

<full-width-text>Lorem Ipsum</full-width-text>

推荐文章