我可以单独使用 CSS 使我的标题字体大小取决于对象的宽度吗？

Question

如前所述，这是用于电子邮件模板，在 gmail、yahoo 邮件、邮件（ios 应用程序）等电子邮件客户端中读取。因此。我不能使用 jQuery，@media 查询被剥离，类也是。

所以我有一个固定的字体大小，但因为在手机上的 gmail 上宽度更小，很多时候文本会被包装成 2 行。 我想要做的是使用与宽度相关的字体大小。 所以我尝试的是像这样使用 vw：

 <p style="font-family: 'Lato', sans-serif; font-size: 2.5vw;font-weight: bold;line-height: 34px; padding: 0 5%; margin: 5% 0 0 0; color: #24b646;">
        {{title}}
    </p>
</td>

我的问题是，即使我的主视图的最大宽度为 640 像素。为了设置它在所有宽度上计算的字体大小。

所以这有一个奇怪的效果。即使View本身是640px，因为TAB变大了，文字变大了

发件人：

收件人：

是否有可能使 vw 使用父级的宽度作为因变量？如果没有，我还能使用什么，以便字体大小将严格依赖于它的父级？ （640px - 电脑的最大宽度，或移动设备的屏幕宽度）

Answer 1

不幸的是，这似乎在 CSS 中是不可能的。看看这两个问题：

• Font size auto adjust to fit

• Auto-size dynamic text to fill fixed size container.

那里提供的解决方案使用无法在电子邮件客户端中运行的 JavaScript。但一种可能的解决方法是将文本写入 svg 图像并对其进行缩放（尽管通常文本应作为文本包含在内）。

CSS Tricks 解释了一些字体大小选项，最后一个可能是您正在寻找的选项（使用 svg-text）。