CSS „Locks“

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Tim Brown mit einem neuen (metaphorischen) Begriff, um einen Wert zu beschreiben, der zwischen zwei festgelegten Werten schwanken kann

In der Kanal- und Flussnavigation ist eine Schleuse ein Gerät, das zum Heben und Senken von Schiffen zwischen Wasserabschnitten mit unterschiedlichem Niveau verwendet wird. Genau das leistet unsere Formel. Unsere Formel ist ein CSS-calc-„Lock“.

Schwanken zwischen einer Zeilenhöhe von 1,3em und 1,5em, abhängig von der Bildschirmbreite

line-height: calc(1.3em + (1.5 - 1.3) * ((100vw - 21em)/(35 - 21)));

Bram Stein hat ein Helfer-Plugin für PostCSS erstellt.

Teil des „Locks“ ist eine zusätzliche Media Query, die den Wert an einem der Extreme überschreibt. Ähnlich wie das, was Mike Riethmuller getan hat, als er mit Molten Leading experimentierte, und wie Eduardo Bouças die viewport-basierte Typografie mit Minima und Maxima anging.

Direkter Link →