Können Sie mathematische Ausdrücke innerhalb der Eigenschaft „max-width“ in CSS verwenden?

Erzielen von Berechnungen der maximalen Breite in CSS

Ist es möglich, mathematische Ausdrücke innerhalb der Eigenschaft „max-width“ in CSS zu verwenden, wie zum Beispiel:

max-width: calc(max(500px, 100% - 80px))

oder

max-width: max(500px, calc(100% - 80px)))

Antwort:

Während eine direkte Berechnung innerhalb der max-width-Eigenschaft bisher nicht möglich war, führt modernes CSS einen Workaround mithilfe von Medienabfragen ein:

<code class="css">.yourselector {
  max-width: calc(100% - 80px);
}

@media screen and (max-width: 500px) {
  .yourselector {
    max-width: 500px;
  }
}</code>

Dieser Ansatz legt die maximale Breite relativ zur Breite des Ansichtsfensters fest, mit einem Minimum von 500 Pixeln, um sicherzustellen, dass das Element diese Breite nicht überschreitet, selbst wenn der übergeordnete Container breiter als 500 Pixel ist.

Das obige ist der detaillierte Inhalt vonKönnen Sie mathematische Ausdrücke innerhalb der Eigenschaft „max-width“ in CSS verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!