css - 基于容器大小的字体缩放

Question

我很难理解字体缩放。

我目前有一个正文 font-size 为 100% 的网站。 100% 的是什么？这似乎以 16 像素计算出来。

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

如何使网站上的文本相对于其容器缩放？我尝试使用 em，但这也无法扩展。

我的理由是，当你调整大小时，像我的菜单这样的东西会被压扁，所以我需要减少 .menuItem 的 px font-size > 与容器宽度相关的其他元素。 (例如，在大型桌面上的菜单中，22px 效果很好。向下移动到平板宽度，16px 更合适。)

我知道我可以添加断点，但我真的希望文本随着有额外的断点而好地缩放，否则，每减少 100 像素，我最终会得到数百个断点控制文本的宽度。

Answer 1

容器查询 现在可能是最好的选择，这取决于您的用例，并支持所有主流浏览器。在此处查看支持级别:https://caniuse.com/mdn-css_properties_container

现在很容易控制

.module h2 {
  font-size: 1em;
  container-name: sidebar
}

@container sidebar (min-width: 700px) {
  .module h2 {
    font-size: 2em;
  }
}

有关容器查询的更多详细信息，请查看 MDN 文章:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

您可以完成的更多示例:https://css-tricks.com/a-few-times-container-size-queries-would-have-helped-me-out/

=========================

旧答案

如果容器不是主体，CSS 技巧涵盖了您在 Fitting Text to a Container 中的所有选项.

如果容器是正文，你要找的是Viewport-percentage lengths :

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist.

值是:

• vw(占视口(viewport)宽度的百分比)
• vh(占视口(viewport)高度的百分比)
• vi(根元素内联轴方向视口(viewport)大小的 1%)
• vb(根元素 block 轴方向视口(viewport)大小的 1%)
• vmin(vw 或 vh 中较小的一个)
• vmax(较大的或 vw 或 vh)

1 v* 等于初始包含 block 的 1%。

使用它看起来像这样:

p {
    font-size: 4vw;
}

如您所见，当视口(viewport)宽度增加时，font-size 也会增加，而无需使用媒体查询。

这些值是一个大小单位，就像 px 或 em 一样，因此它们也可以用于调整其他元素的大小，例如宽度、边距或填充.

浏览器支持非常好，但您可能需要后备，例如:

p {
    font-size: 16px;
    font-size: 4vw;
}

查看支持统计信息:http://caniuse.com/#feat=viewport-units .

此外，查看 CSS 技巧以获得更广泛的外观: Viewport Sized Typography

这里有一篇关于设置最小/最大大小和对大小进行更多控制的好文章: Precise control over responsive typography

这里有一篇关于使用 calc() 设置大小以使文本填充视口(viewport)的文章:http://codepen.io/CrocoDillon/pen/fBJxu

另外，请查看这篇文章，其中也使用了一种被称为“熔融前导”的技术来调整行高。 Molten Leading in CSS