Vergleichsfunktionen in CSS: max(), min(), clamp()

In diesem Artikel werden Ihnen die drei Vergleichsfunktionen max(), min() und clamp() in CSS vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Empfohlen: „CSS-Video-Tutorial“

CSS-Vergleichsfunktion

Es gibt drei CSS-Vergleichsfunktionen:

• max()
• min()
• clamp ( )

min und max

CSS-Min- und Max-Funktionen ähneln Min- und Max-Funktionen in JS-Funktionen. Sie werden verwendet, um den minimalen oder maximalen Wert zwischen mehreren Attributen zu ermitteln. Das Beispiel sieht wie folgt aus

      width: min(100px,200px,300px); //取值100px
      height: max(100px,200px,300px); //取值300px

Wie im Bild gezeigt, nimmt die Breite den Mindestwert von 100 Pixel und die Höhe den Maximalwert von 300 Pixel an. Die Klemmfunktion muss drei Parameter übergeben: ein Minimalwert, ein Standardwert und ein Maximalwert, die zur Handhabung von Grenzwerten verwendet werden. Wenn der

Standardwert

größer als der Maximalwert ist, wird der Maximalwert verwendet. Wenn er kleiner als der Minimalwert ist, wird der Minimalwert verwendet Wenn der Wert zwischen dem Minimum und dem Maximum liegt, wird der Standardwert verwendet.

So verwenden Sie

clamp(MIN,DEFAULT,MAX)

clamp entspricht

max(MIN,min(DEFAULT,MAX))

Case

font-size: clamp(20px,10vw,40px);

Unter Analyse, wenn 10vw kleiner als 20px ist, also wenn die Seitenbreite ist kleiner oder gleich 200 Pixel, die Schriftart beträgt mindestens 20 Pixel. Wenn 10vw größer als 40 Pixel ist, beträgt die maximale Schriftgröße 40 Pixel. 400px, es wird gemäß der Berechnungsformel von Breite/10 berechnet. Überprüfen Sie unten, ob kleiner als 200px ist.

Größer als 400px. Zwischen 200px und 400px

Kompatibilität

Es ist ersichtlich, dass diese drei Funktionen erst kürzlich veröffentlicht wurden, sodass die Kompatibilität inländischer Browser nicht sehr gut ist und die neuesten Versionen der Mainstream-Browser dies grundsätzlich unterstützen können Die Rolle dieser drei Mathematikfunktionen in der reaktionsfähigen Entwicklung ist immer noch sehr offensichtlich. In Zukunft wird sich der Anteil dieser drei Funktionen möglicherweise schrittweise verbessern.

Häufige Nutzungsszenarien

Im Folgenden werden einige gängige

Verwendungsszenarien aufgeführt

Sidebar-Antwort

Für das Seitenleistenlayout muss die Seitenleiste eine feste Breite haben. Wenn Sie ein responsives Design erstellen, können Sie in Betracht ziehen, die maximale Breite zu überschreiten. Verwenden Sie vw, um die Proportionen der Seitenleiste festzulegen. Größe: Klammer (20px, 10vw, 40px);

Gradient glatter Übergang

Gradient gibt die Gradientenlinie des Gradienten gemäß der allgemeinen Operation an wird nicht glatt genug sein. Es wird eine offensichtliche Übergangslinie geben. png" title="160851478568522Vergleichsfunktionen in CSS: max(), min(), clamp()" alt="Vergleichsfunktionen in CSS: max(), min(), clamp()"/ >

Verwenden Sie min, um es zu ändern, der Übergang wird glatter sein

background: linear-gradient(135deg, #2c3e50, #2c3e50 min (20vw, 60%), #3498db);

Dynamische Containerbreite

In der tatsächlichen Anwendung beispielsweise, wenn wir die Breite auf dem Desktop begrenzen und 100% anzeigen möchten Auf dem Handy müssen wir so schreiben:

      aside {
        background: #ccc;
        flex-basis: max(30vw, 150px);
      }
      main {
        background: #09acdd;
        flex-grow: 1;
      }

Jetzt ist nur noch

background: linear-gradient(135deg, #2c3e50, #2c3e50, #3498db);

ganz einfach und klar.

font-size: clamp(20px, 10vw, 40px);

渐变平滑过渡

渐变指定渐变的梯度线，按照一般操作会出现过渡不够平滑的情况，在移动端会有一条明显的过渡线

    .container{
      width: 1440px;
      max-width: 100%;
    }

利用min修改一下，过渡会更加平滑一点

background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db);Zusammenfassung

Diese drei Funktionen eignen sich für die Entwicklung eines responsiven Layouts. Sie können gegebenenfalls verwendet werden, wenn Kompatibilitätsprobleme nicht berücksichtigt werden müssen. Ich habe kürzlich Dinge im Zusammenhang mit CSS-Funktionen zusammengefasst. Sie können gerne weiterhin darauf achten. Klicken Sie hier und klicken Sie hier

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmieren lernen! !

Das obige ist der detaillierte Inhalt vonVergleichsfunktionen in CSS: max(), min(), clamp(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!