是否可以根据其父类的宽度调整字体大小[重复]答案

【问题标题】：Is it possible to adapt a font size responsively to the width of its parent class [duplicate]是否可以根据其父类的宽度调整字体大小[重复]
【发布时间】：2017-02-27 09:32:13
【问题描述】：

以前有人问过这个问题，但解决方案对我不起作用，所以我正在寻找一个有效的解决方案

我正在构建的网站上有一个活动公告块，但客户希望活动日期填满容器的整个宽度。它只适用于一个活动日期，但如果出现其他日期，它会出现在我预期的 2 行上，但我不知道如何做出响应。有什么想法吗？

【问题讨论】：

媒体查询可能是您所寻找的
@Andrew 不，正如我所说的那样，这行不通，在设计中它指出 font-size: 200px 的日期为 2017 年 2 月 17 日。当我输出类似 2017 年 3 月 23 日的内容时。它已经是即使在相同的屏幕尺寸上也很大。

标签： css sass

【解决方案1】：

我在处理倒计时时遇到了类似的问题： http://demos.artbees.net/jupiter5/shortcodes/countdowns-milestones/

我使用的方法是使用元素查询：http://elementqueries.com/

解决了宽度相对范围的问题。我们的组件由客户使用，他们选择它将在网格中占据的列数。在这种不可预测的情况下，它是您的最佳选择。此外，如果你想封装你的组件端使其更可重用。

【讨论】：

【解决方案2】：

如果你不需要在缩放文本中换行，你可以使用 SVG（IE9+，所以完全可以接受）：

<div class="element" style="width: 30%">
  <svg class="scale" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <text x="50" y="50" text-anchor="middle">Test</text>
  </svg>
</div>
<div class="element" style="width: 60%">
  <svg class="scaled" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <text x="50" y="50" text-anchor="middle">Test</text>
  </svg>
</div>

使用这个 CSS：

.element {
  position: relative;
  display: inline-block;
  border: 1px solid red;
}

.scaled {
  width: 100%;
}

https://jsfiddle.net/93bLu80k/1/

在某些版本的 Safari 和 Internet Explorer 中，您可能会遇到垂直缩放 SVG 的问题（我不记得具体是哪个版本）。我在一些带有 Safari 缩放 SVG 的项目中有此代码：

svg {
  // hack to make safari use the correct height of svg
  // https://bugs.webkit.org/show_bug.cgi?id=82489
  max-height: 100%;
}

还有这个用于 Internet Explorer 的 SASS mixin，您必须提前知道 SVG 的纵横比，这通常不是问题：

@mixin aspect-ratio($ratio) {
  .ie & {
    padding-bottom: 100% * $ratio - 0.02;
    height: 1px;
    overflow: visible;
    box-sizing: content-box;
  }
}

（您可以将此 mixin 转换为另一个预处理器，或者简单地在普通 CSS 类中使用硬编码的$ratio。）

【讨论】：

不能在这个上使用 SVG，因为它是可变的，我的客户不会放在那里