1

PostCSSレスポンシブタイプのプラグインを使用しており、生成されたコードは次のとおりです。

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

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

Firefox、Chrome、およびおそらく他の最新のブラウザーで正常に動作します。しかしVersion 9.0.3、私がリンクした Codepen で証明されているように、safari は完全に失敗します。

これがなぜなのか、誰にも考えがありますか？

編集：犯人を見つけた可能性があります.vwとcalcを組み合わせたことが、私が試した問題のようです。それを機能させる方法はありますか？

4

6 に答える 6

2

vw&pxユニットを結合しようとして、Safari 10.0.1 で同じ問題が発生しました。

%これを解決する代わりにフォントサイズの値を使用するとpx解決しました。基本フォントサイズは 16px を想定しています。

html {
  font-size: 16px;
}

h1 {
  font-size: calc(175% + 20 * ((100vw - 320px) / 880));
}
<h1>Responsive title in Safari 10</h1>

于 2016-12-12T13:42:16.153 に答える
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 質問: CSS calc() 関数が機能しないのはなぜですか?

参照用の別の古い修正: jQuery() の使用

参照 ：

  1. vh/vw

  2. 計算

  3. Safari 計算テスト

于 2016-05-06T11:29:28.200 に答える
1

私がこの問題を解決した方法は、純粋な 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));
}
于 2016-05-06T11:24:08.423 に答える
1

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 */ 
}
于 2020-08-31T22:01:55.753 に答える