Die CSS Calc () -Funktion erm?glicht die dynamische Gr??e von Webseitenelementen, indem mathematische Operationen in Stylesheets ausgeführt werden. Es erm?glicht Flexibilit?t durch Mischen von Einheiten wie %, PX, EM und REM und berechnen die Werte im laufenden Fliegen neu. 1. Es ist nützlich für reaktionsschnelle Layouts, z. B. die Einstellung der Breite mit Abstandsanpassungen: Breite: Calc (100% - 20px);. 2. Es hilft, dynamische Lücken in Gitter oder Flexbox -Layouts zu erhalten, indem es in R?ndern und Polsterung berücksichtigt wird. 3.. Es unterstützt Fluid-Typografie wie Schriftgr??e: Calc (16px 2vw);, das skalierbare Text ohne Medienfragen zul?sst. 4. In Kombination mit CSS-Variablen f?rdert es wiederverwendbare und aufrechterhaltene Code, zum Beispiel: Polster: Calc (var (-Abstand) * 2);. Zu den wichtigsten Tipps geh?rt die Verwendung von Leerzeichen um Operatoren, die Vermeidung von überm??ig komplexen Ausdrücken und das Testen von Ger?ten für optimale Ergebnisse.

Wenn Sie Elemente auf Ihrer Webseite ben?tigen, um sich dynamisch auf der Grundlage anderer Werte dynamisch zu belasten, ist die CSS calc() -Funktion ein leistungsstarkes Tool. Sie k?nnen mathematische Operationen direkt in Ihren Stylesheets ausführen, sodass es einfacher ist, flexible und reaktionsschnelle Layouts zu erstellen, ohne sich ausschlie?lich auf JavaScript oder feste Gr??en zu verlassen.

Warum calc() verwenden?

Der Hauptvorteil von calc() ist Flexibilit?t. Sie k?nnen verschiedene Einheiten (wie Prozents?tze, Pixel, EMS, REMs) mischen und die Werte im laufenden Flug neu berechnen. Dies macht es ideal für Situationen, in denen Sie Abstand, Breiten, H?hen oder Schriftgr??en basierend auf anderen bekannten Werten einstellen m?chten.

Zum Beispiel:

 Breite: Calc (100% - 20px);

Diese Zeile sagt, dass der Browser die volle Breite des Containers einnimmt und 20 Pixel subtrahiert - nützlich, wenn sie auf Polsterung oder Grenzen berücksichtigt werden, ohne das Boxmodell zu ?ndern.

Reaktionsschnelle Layouts mit dynamischen Lücken

Ein allgemeiner Anwendungsfall ist das Erstellen von Layouts, die den Abstand zwischen den Elementen beibehalten, w?hrend sie sich an die Bildschirmgr??e anpassen. Stellen Sie sich ein Raster vor, in dem jede S?ule 30% breit sein sollte, aber auch eine Marge von 5% auf jeder Seite.

Sie k?nnten so etwas tun:

 .Spalte {
  Breite: Calc (30% - 10%);
}

Oder wenn Sie Flexbox verwenden und negative Margen vermeiden m?chten, kann calc() dazu beitragen, einen konsistenten Abstand durch Einstellen von Polsterung oder Rand direkt am Beh?lter einzustellen.

Einige wichtige Punkte:

• Sie k?nnen Einheiten wie % , px , em , rem frei mischen.
• Fügen Sie immer einen Raum um Betreiber ein ( , - , usw.).
• Es wird in allen modernen Browsern unterstützt.

Schriftgr??e, die mit Ansichtsfenster skaliert wird

Eine weitere clevere Verwendung von calc() ist für die Fluid -Typografie. Die Schriftgr??en werden zwischen den minimalen und maximalen Werten reibungslos angepasst, wenn sich der Bildschirm ?ndert.

Hier ist ein Beispiel:

 Schriftgr??e: Calc (16px 2vw);

Dies bedeutet, dass die Schriftart immer mindestens 16px sein wird, aber auch leicht w?chst, wenn das Ansichtsfenster breiter wird. Es vermeidet, dass Text auf gro?en Bildschirmen zu klein aussieht, ohne Medienabfragen für jede ?nderung der Gr??e zu ben?tigen.

Tipps:

• Beginnen Sie mit einer Basisgr??e in Pixeln.
• Fügen Sie eine relative Einheit wie vw oder vh hinzu oder subtrahieren Sie.
• Testen Sie, wie es sich über Ger?te hinweg verh?lt.

Kombinieren Sie calc() mit CSS -Variablen

Die Verwendung von calc() mit benutzerdefinierten Eigenschaften (CSS -Variablen) er?ffnet noch mehr dynamische M?glichkeiten. Zum Beispiel k?nnen Sie die Abstandswerte einmal definieren und sie dann in Berechnungen w?hrend Ihres gesamten Layouts verwenden.

Beispiel:

 :Wurzel {
  -Abteilung: 20px;
}

.Container {
  Polsterung: Calc (var (-Abstand) * 2);
}

Dies h?lt Ihren Code trocken und erleichtert die globalen ?nderungen. Wenn Sie aktualisieren --spacing , alles, was es in einer Berechnungsaktualisierungen automatisch verwendet.

Ein paar Dinge, die Sie beachten sollten:

• calc() in einem anderen calc() ist zul?ssig.
• Vergessen Sie nicht R?ume rund um Mathematikbetreiber.
• Vermeiden Sie überm??ig komplexe Ausdrücke; Sie k?nnen schwer zu lesen sein.

Das ist im Grunde das, was Sie für die effektive Verwendung calc() verwenden müssen. Es ist nicht kompliziert, erfordert jedoch die Aufmerksamkeit für Syntax und Tests über Ger?te hinweg. Sobald Sie sich daran gew?hnt haben, wird es zu einem dieser Werkzeuge, nach denen Sie oft greifen.

Das obige ist der detaillierte Inhalt vonVerwendung der CSS Calc () -Funktion für dynamische Gr??e. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!