Wie kann ich die maximale Breite in CSS berechnen, ohne die Funktion „max“ zu verwenden?

Berechnen der maximalen Breite in CSS

In CSS ist es derzeit nicht möglich, die maximale Breite direkt als Funktion anderer Werte mithilfe von zu berechnen maximale Funktion. Der Versuch, dies mit Konstrukten wie max-width: calc(max(500px, 100% - 80px)) oder max-width: max(500px, calc(100% - 80px))) zu tun, führt nicht zum gewünschten Ergebnis.

Eine CSS-Lösung mit Medienabfragen

Es ist jedoch möglich, mithilfe von Medienabfragen einen ähnlichen Effekt zu erzielen:

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

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

In diesem Beispiel wird die . Das Yourselector-Element hat eine maximale Breite basierend auf der Größe des Ansichtsfensters. Wenn das Ansichtsfenster breiter als 500 Pixel ist, wird die maximale Breite als Differenz zwischen der Breite des Ansichtsfensters und 80 Pixel festgelegt. Wenn das Ansichtsfenster jedoch 500 Pixel oder kleiner ist, wird die maximale Breite explizit auf 500 Pixel festgelegt.

Dieser Ansatz nutzt effektiv Medienabfragen, um die maximale Breite dynamisch basierend auf der Bildschirmgröße zu berechnen und so die gewünschte Funktionalität von nachzuahmen die Max-Funktion eingeschränkt nutzen.

Das obige ist der detaillierte Inhalt vonWie kann ich die maximale Breite in CSS berechnen, ohne die Funktion „max“ zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!