CSS3 GEMS：calc（）関数

css3 calc（）関数の詳細な説明：柔軟なレイアウトのための強力なツール

コアポイント

• CSS3calc()関数により、長さ、数、角度、遷移/アニメーション時間、または音の周波数の計算が可能になり、さまざまなユニットタイプの混合をサポートします。この機能は、流体またはレスポンシブレイアウトの正確な幅の計算を可能にするため、レイアウト設計で特に役立ちます。
• calc()関数のブラウザのサポートは現在制限されています。 Internet Explorer 9およびFirefox（接頭辞）ネイティブサポートですが、WebKit（ChromeおよびSafari）とOperaはまだ実装されていません。ただし、StyleSheetsでは、さまざまなブラウザー間の互換性を確保するために、StyleSheetsで進歩的な機能強化を使用できます。
• css3のmin()およびmax()関数は、2つ以上のコンマ区切り値の最小値または最大値を返し、相対フォントサイズを制御するためにも使用されますが、現在は最新のブラウザではサポートされていません。

CSS3のモジュラー仕様には多くの宝物が隠されています。この記事では、レイアウトデザインの処理方法を変更する可能性のある非常に有用なプロパティを紹介します。 CSS3calc()関数は、主に長さ、数、角度、遷移/アニメーション時間または音の頻度を計算するために使用されます。ただし、CSSの強力な概念である測定タイプを組み合わせることができます。 2つのフローティング要素を含むWebサイトレイアウトを検討してください。これらの2つの要素が等しい幅を持ち、60pxの水平マージンで分離することを望みます。シンプルに聞こえますか？固定された幅の設計では問題ではありません。しかし、流体やレスポンシブレイアウトはどうですか？ページ幅を決定できないため、ほとんどの開発者は各要素を45％に設定します。ページがたまたま600pxである場合にのみ、マージンの10％が60pxまたは狭いブラウザのウィンドウが拡大します。幸いなことに、新しいcalc()関数を使用すると、幅を計算できます。この場合、両方の要素を50％マイナス30pxにすることを望みます。 calc()

たとえば、フォントサイズに関連するマージンが必要なのでしょうか？たとえば、4EM？問題ありません：

#element1, #element2 {
  float: left;
  width: calc(50% - 30px);
}

#element2 {
  margin-left: 60px;
}

または両方の要素の周りに2pxの境界線を追加することをお勧めします：

#element1, #element2 {
  width: calc(50% - 2em);
}

計算をシンプルに保つことをお勧めしますが、次のような複雑な式を使用できます。

#element1, #element2 {
  width: calc(50% - 2em - 4px);
  border: 2px solid #000;
}

ブラウザサポート

#element1, #element2 { width: calc((50% + 2em)/2 + 14px); }

関数はW3Cの推奨事項であるため、どのブラウザがネイティブサポートを提供しますか？間違っている。執筆時点では、インターネットエクスプローラー9のみがあります。 Firefoxはプレフィックスでもサポートしています。 WebKit（Chrome and Safari）やOperaには実装されていませんが、非常に便利であり、あまり長く待つ必要はないと思います。幸いなことに、スタイルシートでプログレッシブエンハンスメントを使用できます。

それに応じてマージンを調整する必要があることを忘れないでください。 calc() -moz-calc()

CSS3 calc()が好きな場合は、min()およびmax()関数が気に入ってしまいます。彼らは2つ以上のコンマ分離値を受け入れ、それに応じて最小値または最大値を返します。たとえば

#element1, #element2 {
  float: left;
  width: calc(50% - 30px);
}

#element2 {
  margin-left: 60px;
}

これらの関数は、相対的なフォントサイズを使用して、テキストが大きすぎたり小さすぎたりしないようにする場合に特に役立ちます。残念ながら、現在、

およびmin()は最新のブラウザではサポートされていません。彼らがすぐに登場することを願っています。 max()

（この部分の内容は元のテキストで非常に繰り返されるため、ここではよくある質問セクションは省略されています。擬似原産性はより難しく、長さは長くなります。これは、記事を合理化するのに役立ちません。）

以上がCSS3 GEMS：calc（）関数の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。