Akıcı Tipografi - CSS Hileleri | Kod parçacıkları 2024

Doğrudan koda gelince, işte çalışan bir uygulama:

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; ) )

Pratik, sabitlenmiş, görünüm tabanlı tip boyutlandırma için daha yeni yayınlanan Basitleştirilmiş Akışkan Tipografimize bakmaya değer.

Bu, font-sizeminimum 16 pikselden (320 piksel görüntü alanında) maksimum 22 piksele (1000 piksel görüntü alanında) ölçeklenir . İşte bunun bir demosu, ancak bir Sass @mixin olarak (daha sonra ele alacağız).

CodePen'de Chris Coyier (@chriscoyier) tarafından Sass ile Sıvı Tipi Kalem Tabanı Örneğine bakın.

Sass, sadece bu çıktının üretilmesini biraz daha kolaylaştırmak ve işin içinde bir matematik parçası olduğu gerçeği için kullanıldı. Hadi bir bakalım.

Görüntü alanı birimlerini kullanarak ve calc()yazı tipi boyutu (ve diğer özellikleri) ekran boyutuna göre boyutlarını ayarlayabiliriz. Dolayısıyla, her zaman aynı boyutta olmak veya ortam sorgularında bir boyuttan diğerine atlamak yerine, boyut değişken olabilir.

İşte matematik, kredi Mike Riethmuller:

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

Matematiğin biraz karmaşık olmasının nedeni, yazının minimum değerimizden daha küçük veya maksimumumuzdan daha büyük olmasını önlemeye çalışmamızdır ki bu, görüntü alanı birimleriyle yapmak çok kolaydır.

Örneğin, bir dizi bizim yazı tipi boyutunu istiyorsanız 14pxen küçük görüntü alanı genişliği minimum boyutudur 300pxve nerede 26pxen büyük görüntü alanı genişliği maksimum boyutu 1600px, böyle sonra bizim denklem görünüyor:

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

Metin, görünüm alanının genişliğine göre akıcı bir şekilde değişir

CodePen'de CSS-Tricks (@ css-tricks) tarafından Kalem JEVevK'e bakın.

Bu minimum ve maksimum boyutları sabitlemek için, medya sorgularında bu matematiği kullanmak yardımcı olur. İşte size yardımcı olacak biraz Sass…

Sass'ta

Bunun gibi (oldukça sağlam) bir mixin yapabilirsiniz:

@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; ) ) ) )

Bunun gibi kullandığınız:

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

İşte akıcı ritmi tam olarak elde etmek için Mike'ın bir başka örneği:

Fikri Modüler Ölçekli Başlıklara Genişletme

Modüler ölçek, yani ne kadar fazla alan mevcutsa, boyut olarak o kadar dramatiktir. Belki de en büyük görüntü alanında, hiyerarşideki her başlık bir sonrakinden 1,4 kat daha büyüktür, ancak en küçüğü yalnızca 1,05x'tir.

Görünüme bakın:

@MikeRiethmuller'dan çalınan "Fluid Type" i̶n̶s̶p̶i̶r̶e̶d̶ artık @CodePen bloglarında yayında. "Akışkan Modüler Ölçek!" Dahil pic.twitter.com/0yJk8Iq8fR

- Chris Coyier (@chriscoyier) 27 Ekim 2016

Sass karışımımızla bu şuna benzer:

$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); )