Τυπογραφία υγρών - CSS-Κόλπα | Αποσπάσματα κώδικα 2025

Ακολουθώντας τον κώδικα, ακολουθεί μια λειτουργική εφαρμογή:

html ( font-size: 16px; ) @media screen and (min-width: 320px) ( html ( font-size: calc(16px + 6 * ((100vw - 320px) / 680)); ) ) @media screen and (min-width: 1000px) ( html ( font-size: 22px; ) )

Αξίζει να δούμε την πιο πρόσφατη δημοσίευση απλοποιημένης τυπογραφίας ρευστού για πρακτικά, συσφιγμένα, μεγέθη τύπου με βάση τη θύρα.

Αυτό θα font-sizeκυμαινόταν από τουλάχιστον 16px (σε θύρα προβολής 320px) έως 22px το μέγιστο (σε θύρα προβολής 1000px). Ακολουθεί μια επίδειξη αυτού, αλλά ως Sass @mixin (το οποίο θα καλύψουμε αργότερα).

Δείτε το παράδειγμα της βάσης πένας του Fluid Type w Sass από τον Chris Coyier (@chriscoyier) στο CodePen.

Το Sass χρησιμοποιήθηκε μόνο για να κάνει αυτή την έξοδο λίγο πιο εύκολο να δημιουργηθεί, και το γεγονός ότι υπάρχει μια σειρά μαθηματικών. Ας ΡΙΞΟΥΜΕ μια ΜΑΤΙΑ.

Χρησιμοποιώντας μονάδες θύρας προβολής και calc(), μπορούμε να έχουμε μέγεθος γραμματοσειράς (και άλλες ιδιότητες) να προσαρμόσουν το μέγεθός τους με βάση το μέγεθος της οθόνης. Έτσι, αντί να είναι πάντα το ίδιο μέγεθος, ή να πηδά από το ένα μέγεθος στο άλλο σε ερωτήματα πολυμέσων, το μέγεθος μπορεί να είναι ρευστό.

Εδώ είναι τα μαθηματικά, πίστωση Mike Riethmuller:

body ( font-size: calc((minimum size) + ((maximum size) - (minimum size)) * ((100vw - (minimum viewport width)) / ((maximum viewport width) - (minimum viewport width)))); )

Ο λόγος που τα μαθηματικά είναι λίγο περίπλοκα είναι ότι προσπαθούμε να αποφύγουμε τον τύπο να γίνεται μικρότερος από το ελάχιστο ή μεγαλύτερο από το μέγιστο μας, κάτι που είναι πολύ εύκολο να κάνουμε με τις μονάδες προβολής.

Για παράδειγμα, αν θέλουμε το μέγεθος της γραμματοσειράς μας σε εύρος όπου 14pxείναι το ελάχιστο μέγεθος στο μικρότερο πλάτος θύρας προβολής 300pxκαι πού 26pxείναι το μέγιστο μέγεθος στο μεγαλύτερο πλάτος θύρας προβολής 1600px, τότε η εξίσωση μας μοιάζει με αυτήν:

body ( font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300))); )

Το κείμενο αλλάζει ρευστά στο πλάτος της θύρας προβολής

Δείτε το Pen JEVevK από CSS-Tricks (@ css-tricks) στο CodePen.

Για να κλειδώσετε αυτά τα ελάχιστα και μέγιστα μεγέθη, η χρήση αυτού του μαθηματικού στα ερωτήματα πολυμέσων βοηθά. Εδώ είναι μερικά Sass για να βοηθήσετε…

Στο Sass

Θα μπορούσατε να φτιάξετε μια (αρκετά στιβαρή) μίξη, όπως αυτή:

@function strip-unit($value) ( @return $value / ($value * 0 + 1); ) @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) ( $u1: unit($min-vw); $u2: unit($max-vw); $u3: unit($min-font-size); $u4: unit($max-font-size); @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 ( & ( font-size: $min-font-size; @media screen and (min-width: $min-vw) ( font-size: calc(#($min-font-size) + #(strip-unit($max-font-size - $min-font-size)) * ((100vw - #($min-vw)) / #(strip-unit($max-vw - $min-vw)))); ) @media screen and (min-width: $max-vw) ( font-size: $max-font-size; ) ) ) )

Που χρησιμοποιείτε ως εξής:

$min_width: 320px; $max_width: 1200px; $min_font: 16px; $max_font: 24px; html ( @include fluid-type($min_width, $max_width, $min_font, $max_font); )

Εδώ είναι ένα άλλο από τα παραδείγματα του Mike, που παίρνει τον υγρό ρυθμό ακριβώς:

Επέκταση της ιδέας σε κεφαλίδες με αρθρωτή κλίμακα

Αρθρωτή κλίμακα, που σημαίνει ότι όσο περισσότερο διαθέσιμος χώρος, τόσο πιο δραματικό είναι το διαφορετικό μέγεθος. Ίσως στο μεγαλύτερο σημείο προβολής με, κάθε κεφαλίδα στην ιεραρχία είναι 1,4 φορές μεγαλύτερη από την επόμενη, αλλά στο μικρότερο, μόνο 1,05x.

Δείτε την προβολή:

"Fluid Type" i̶n̶s̶p̶i̶r̶e̶d̶ που έχει κλαπεί από το @MikeRiethmuller τώρα ζωντανά στο blog του @CodePen. Συμπεριλαμβανομένου του "Fluid Modular Scale!" pic.twitter.com/0yJk8Iq8fR

- Chris Coyier (@chriscoyier) 27 Οκτωβρίου 2016

Με το Sass mixin μας, μοιάζει με:

$mod_1: 1.2; // mobile $mod_2: 1.5; // desktop h1 ( font-size: $mod_1*$mod_1*$mod_1*$mod_1 *1rem; @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font); ) h2 ( font-size: $mod_1*$mod_1*$mod_1 *1rem; @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font); ) h3 ( font-size: $mod_1*$mod_1 *1rem; @include fluid-type($min_width, $max_width, $mod_1*$mod_1 *$min_font, $mod_2*$mod_2 *$min_font); )