Schönes Video von Kevin Powell. Hier sind einige Notizen, Gedanken und Dinge, die ich beim Anschauen gelernt habe. Gleich als sie herauskamen, war ich meistens von der Verwendung von font-size besessen, aber es sind nur Funktionen, daher können sie überall dort verwendet werden, wo Sie eine Zahl verwenden würden, wie z. B. eine Länge.
Manchmal ermöglicht eine ziemlich grundlegende Verwendung einen strafferen Code, aber die Umstellung, um dorthin zu gelangen, fühlt sich ein wenig umwerfend an. Wie zum Beispiel, um hier ein "Max" festzulegen, verwendet man tatsächlich min().
.el {
width: 75%;
max-width: 600px;
/* tighter, but the change from max to min feels weird */
width: min(75%, 600px);
}Die Funktionen min() und max() können mehr als zwei Werte annehmen, was cool ist, aber es ist schwer zu verstehen, was vor sich geht! Es wäre schön, wenn DevTools Ihnen sagen könnten, welchen Wert es zu einem bestimmten Zeitpunkt ausgewählt hat.
.el {
width: min(100px, 25%, 50vh, 30ch);
}Sie benötigen keine calc(), um darin zu rechnen!
.el {
width: min(10vw + 10%, 100px);
}Es ist verständlich, dass Sie einen Mindest- *und* Höchstwert festlegen möchten. Sie können die Funktionen dafür verschachteln, aber es ist mit clamp() weniger umwerfend zu tun.
.el {
/* Note we're always using a relative unit somewhere
so that zooming stays effective. */
font-size: clamp(0.9rem, 1vw + 1rem, 2.2rem);
}Hier ist das eingebettete Video
Das ist nett und alles, aber clamp() hat keine ausreichende Browserunterstützung, um die Verwendung praktikabel zu machen.
Insbesondere ein völliges Fehlen der Unterstützung durch Safari.
Sie benötigen eine Fallback-Lösung, aber die Browserunterstützung ist bereits anständig, einschließlich voller Unterstützung in der neuesten Safari-Version
https://caniuse.com/#feat=css-math-functions
Tut es jetzt!
Ich habe mit clamp() herumgespielt und es ist wirklich wunderbar für fluide Schriftgrößen!
Eine Sache bei Ihrem Beispiel mit font-size und clamp(): Da Ihre Standardgröße auf 1rem+1vw eingestellt ist, kann die von Ihnen angegebene Mindestgröße nie erreicht werden: 0.8rem. Die vw-Einheit wird niemals negativ, daher wäre die tatsächliche Mindestgröße (wenn ein Bildschirm null Pixel breit wäre) 1rem, nicht 0.8rem. Ich denke also, Sie müssten den rem-Betrag im Standardwert so einstellen, dass er mit dem Mindestbetrag übereinstimmt
font-size: clamp(0.8rem, 0.8rem + 1vw, 2.2rem);
Macht das Sinn?
Ja, tatsächlich. Ich nehme an, selbst mit
0.8rem + 1vwwäre es sehr schwierig, vollständig auf 0.8rem zu kommen. Vielleicht macht es Sinn, einfach ein wenig visuell zu testen und einenpx-Wert zu wählen, der ungefähr so klein erscheint, wie er jemals sein sollte.In diesem Fall denke ich, brauchen Sie nicht einmal clamp. min() allein könnte die Aufgabe erledigen, da, wie Sie erwähnten, vw niemals negativ sein wird.
Wenn ich mich nicht irre, wird min(0.8rem + 1vw, 2.2rem) dasselbe Ergebnis liefern.
Sie können tatsächlich min und max zusammen verwenden und dasselbe Ergebnis wie mit clamp erzielen. Sie können min(23px,max(16px, 23/1280 * 100vw)) schreiben, wobei 23px tatsächlich die größte Schriftgröße ist, die Sie Ihrem Text geben möchten, und im Gegensatz dazu mit max die kleinste Größe, nämlich 16px. Dann sagen Sie, dass, wenn Sie die 1280px Bildschirmbreite erreichen, die 23px genommen und zu schrumpfen beginnen, und das ist alles, alle Browser unterstützen das
Jeremy Keith schrieb (https://adactio.com/journal/16887) über Probleme beim Kompilieren von Sass mit diesem Code, da Sass versucht, die 50% + 0.66vw Berechnung selbst durchzuführen, was in einem Präcompiler nicht funktionieren kann, ohne zu wissen, was 50% oder 0.66vw ist
Aber es gibt eine Umgehungslösung: Verwenden Sie Sass-Interpolation und fügen Sie einen String mit der Berechnung ein
Mann, das ist der Heilige Gral für mindestens Schriftgrößen! Alle Browser der Welt sh… MÜSSEN das sofort implementieren!
Warum ist es in clamp nicht möglich, eine minimale Schriftgröße, eine maximale Schriftgröße, eine minimale Bildschirmbreite und eine maximale Bildschirmbreite anzugeben? Wäre das nicht einfacher als all diese Mathematik?
Interessanter Gedanke. Aber clamp ist nicht darauf beschränkt, eine vw-basierte Einheit als zweiten Wert zu haben. Sie könnte auf Prozent oder ch basieren. Daher wäre es nicht immer sinnvoll, eine minimale und maximale Bildschirmbreite als zusätzliche Parameter anzugeben.
Aber wenn Sie die
vw + rem-Werte in einem bestimmten Viewport-Bereich berechnen möchten – wir haben gerade ein kleines Tool gestartet, das genau dabei hilftmin-max-value-interpolation-tool
Hinweis: clamp passt sich beim Ändern der Browsergröße nicht automatisch an – Sie müssen aktualisieren, um die Größenanpassung anzuwenden.