Question

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

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

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

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

有没有人知道为什么会这样？

编辑：我可能已经找到了罪魁祸首，似乎与calc一起使用vw是我尝试过的问题。有没有办法让它发挥作用？

Answer 1

如果有人在2020年看到这个，并且由于Safari仍然表现得很时髦（尤其是在处理动态字体大小时）而感到迷失的话，请看一下codepen

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

为我解决了问题

min-height: 0vw;

在“文本类”上。我最终将其用作全局变量，因此不需要在任何想使用它的地方引入该类。

希望有帮助。

Answer 2

calc或vh/vw in calc可能在Safari和Android浏览器中出现问题。这是一个已知问题，已在Safari 7+中修复，但报告的问题仍然很少。

-webkit-calc可以用作后备版，它在Safari中运行良好。

Safari的示例修复：

sometag{
    width: 48%;
    width: -webkit-calc(50% - 20px);
    width: -moz-calc(50% - 20px);
    width: calc(50% - 20px);
}

来源：SO question : Why doesn't the CSS calc() function work for me?

另一个旧修复供您参考：using jQuery()

参考：

Answer 3

我在Safari 10.0.1中遇到了同样的问题，试图合并vw＆amp; px单位。

使用%字体大小而不是px解决了这个问题。我假设基本字体大小为16px。

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

<h1>Responsive title in Safari 10</h1>

Answer 4

我解决这个问题的方法是引入一个纯粹的CSS回退，那些不支持CSS calc的老浏览器只会读取。

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

Answer 5

在重新设置大小时，Safari 13.1.1似乎又遇到了动态字体大小（基于计算的视口宽度）的问题。所以这行不通：

html {
font-size: calc(1em + 1vw)
}

我刚刚找到的解决方法：

html {
font-size: 1vw; /* initialise it first without calc() */
}

body {
font-size: calc(1em + 16px); /* 1vw = 1em here and 16px is the default browser value */ 
}

Answer 6

似乎已在此处修复此问题：
https://bugs.webkit.org/show_bug.cgi?id=224614

应该在 Safari 的未来版本中。

字体大小计算动态大小Safari失败

6 个答案: