序文
最近、小さなプログラムを学習するプロジェクトで、
適応高さスライドを使用すると、複数のモデルを満足させることができません。
計算された幅と高さの適応を実現するには、CSS の calc() 構文の方が便利であるという情報を確認してください。
css calc() の概要
この CSS 関数を使用すると、CSS プロパティ値を宣言するときにいくつかの計算を実行できます。次の場合に使用できます:
<length>、<frequency>、<angle>、<time>、<percentage>、<number>、または <integer>。
文法
//加法
height: calc(10px+ 10px);
//减法
width: calc(100% - 80px);
//乘法
height: calc(10vh * 5);
//除法
width: calc(100% / 2);
知らせ
calc() 関数の構文を記述する場合、特に + 演算子と - 演算子を使用する場合は、各演算の間にスペースを含める必要があります。そうしないと、式が無効になります。例
:
calc(100% -288px) //此代码无效
//正确写法
calc(100% - 100px)
使用シーン
- CSS 変数の処理
- 新しい値を取得するには計算する必要があります
- プリプロセッサでは実行できない、異なるユニット間の計算に使用されます
- ポジショニングのニーズ
- サイトの構造やその他の要素を調整する
- 同じ計算を繰り返さないようにする
要約する
CSS の calc() 構文は、開発で冗長で反復的な操作を行うのに便利で、
開発効率を簡素化し、さまざまな画面サイズとの互換性を高めて、適応の良い仕事をします!