字体大小计算动态大小 Safari 失败 [英] Font-size calc dynamic size Safari failing

问题描述

我使用 PostCSS responsive-type 插件，生成的代码如下:

Im using PostCSS responsive-type plugin and the generated code I get is as follows:

h1 {
 font-size: calc(28px + 20 * ((100vw - 320px) / 880));
}

http://codepen.io/umbriel/pen/WwLBxQ

在 Firefox、Chrome 和其他现代浏览器中运行良好.但是 safari Version 9.0.3 完全失败，正如我链接的 Codepen 所证明的那样.

Works fine in Firefox, Chrome and probably other modern browsers. But safari Version 9.0.3 fails entirely as evidenced in the Codepen I linked.

有人知道这是为什么吗?

Does anyone have any ideas why this is?

我可能已经找到了罪魁祸首，似乎 vw 与 calc 结合是我尝试过的问题.有没有办法让它工作?

edit: I may have found the culprit, it seems vw in conjunction with calc is the issue from what I tried. Is there a way of making it work?

推荐答案

如果有人在 2020 年看到这个并且感觉有点迷茫，因为 Safari 仍然表现得很时髦(尤其是在处理动态字体大小时)，看看这个 codepen

If anyone is looking at this in 2020 and feels kind of lost as Safari is still acting funky (especially when dealing with dynamic font sizing) have a look at this codepen

这不是我的，但它通过使用

It's not mine but it solved the problem for me by using a

min-height: 0vw;

关于文本类".我最终将它用作全局，所以我不需要在我想使用它的任何地方都带入课程.

on the 'text class'. I ended up using it as a global so I don't need to bring in the class everywhere I want to use it.

希望有所帮助.

这篇关于字体大小计算动态大小 Safari 失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！