Florens Verschelde taucht tief in die Zahlen hinter dem Konzept ein, über das Tim Brown neulich gesprochen hat.
Als ich versuchte, Tim's Implementierung zu verstehen und Varianten davon zu erstellen, hatte ich Schwierigkeiten herauszufinden, was genau vor sich ging. Ich habe viele Überschlagsrechnungen durchgeführt und dachte, es wäre nützlich, eine mathematische Erklärung zu teilen.
Hier ist meine Laienhafte Erklärung
- Sie können einen Wert (wie `font-size`) mit Viewport-Einheiten flexibel gestalten.
- Nur mit Viewport-Einheiten kann dieser Wert zu flexibel sein und zu Werten führen, die *zu* klein oder *zu* groß sind.
- Sie können die oberen und unteren Grenzen mit @media-Abfragen "sperren".
- Sie benötigen immer noch eine ausgefeilte Berechnung, um die "mittleren" Werte zwischen den beiden "Sperren" zu berechnen.
- Die Berechnungen können in ihrer Komplexität variieren, insbesondere wenn Sie versuchen, relative Einheiten zu verwenden und die Skalierung der Benutzerschriftarten zu berücksichtigen.
Der Code endet in einem bestimmten Beispiel so
@media (min-width: 320px) and (max-width: 959px) {
h1 {
font-size: calc( 1.5rem + 16 * (100vw - 320px) / (960 - 320) );
/* For a negative slope, we have to invert the breakpoints */
line-height: calc( 120% + 3.2 * (100vw - 960px) / (320 - 960) );
}
}Denken Sie daran, dass es ein PostCSS-Plugin gibt.