Tipografi Bendalir - Trik CSS

Untuk mendapatkan kod, berikut adalah pelaksanaan yang berfungsi:

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

Perlu dilihat pada tulisan Tipografi Fluida Mudah Alih kami yang terbaru untuk ukuran jenis praktikal, dijepit, berdasarkan pandangan.

Itu akan berskala font-sizedari minimum 16px (pada viewport 320px) hingga maksimum 22px (pada viewport 1000px). Inilah demo itu, tetapi sebagai Sass @mixin (yang akan kita bahas nanti).

Lihat Contoh Pangkalan Pen Jenis Fluid dengan Sass oleh Chris Coyier (@chriscoyier) di CodePen.

Sass digunakan hanya untuk membuat output yang sedikit lebih mudah dihasilkan, dan fakta bahawa terdapat sedikit matematik yang terlibat. Mari kita lihat.

Dengan menggunakan unit viewport calc(), dan ukuran font (dan sifat lain) dapat menyesuaikan ukurannya berdasarkan ukuran layar. Jadi daripada selalu menjadi ukuran yang sama, atau melompat dari satu ukuran ke ukuran yang lain pada pertanyaan media, ukurannya dapat menjadi lancar.

Inilah matematik, kredit Mike Riethmuller:

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

Alasan bahawa matematik sedikit rumit adalah bahawa kita berusaha untuk mengelakkan jenis menjadi semakin kecil daripada minimum atau lebih besar daripada maksimum kita, yang sangat mudah dilakukan dengan unit pandang.

Sebagai contoh, jika kita mahukan ukuran fon kita dalam julat di mana 14pxukuran minimum pada lebar pandang terkecil 300pxdan di mana 26pxukuran maksimum pada lebar pandangan terbesar 1600px, maka persamaan kami kelihatan seperti ini:

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

Teks berubah dengan lancar ke lebar ruang pandang

Lihat Pen JEVevK oleh CSS-Tricks (@ css-tricks) di CodePen.

Untuk mengunci ukuran minimum dan maksimum tersebut, penggunaan matematik ini dalam pertanyaan media sangat membantu. Inilah beberapa Sass untuk membantu ...

Di Sass

Anda boleh membuat mixin (cukup mantap), seperti ini:

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

Yang anda gunakan seperti ini:

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

Inilah satu lagi contoh Mike, mendapatkan irama cairan yang tepat:

Memperluas Idea ke Tajuk dengan Skala Modular

Skala modular, yang bermaksud semakin banyak ruang yang ada, semakin dramatik ukurannya berbeza. Mungkin di sudut pandang terbesar dengan, setiap tajuk hierarki adalah 1.4x lebih besar daripada yang berikutnya, tetapi yang terkecil, hanya 1.05x.

Lihat paparan:

“Fluid Type” i̶n̶s̶p̶i̶r̶e̶d̶ yang dicuri dari @MikeRiethmuller kini disiarkan di blog @CodePen. Termasuk "Skala Modular Fluid!" pic.twitter.com/0yJk8Iq8fR

- Chris Coyier (@chriscoyier) 27 Oktober 2016

Dengan mixin Sass kami, kelihatan seperti:

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