Рідинна типографіка - CSS-хитрощі

Anonim

Потрапляючи прямо до коду, ось робоча реалізація:

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зменшено від мінімум 16 пікселів (у вікні перегляду 320 пікселів) до максимуму 22 пікселів (у вікні перегляду 1000 пікселів). Ось демонстрація цього, але як Sass @mixin (про яку ми розповімо пізніше).

Дивіться Приклад основи пера типу Fluid Type w Sass від Chris Coyier (@chriscoyier) на CodePen.

Sass був використаний лише для того, щоб зробити цей результат трохи простішим для генерації, і того факту, що тут є смайли математики. Давайте подивимось.

Використовуючи одиниці області перегляду calc(), ми можемо запропонувати розмір шрифту (та інші властивості) регулювати їх розмір залежно від розміру екрана. Тому замість того, щоб завжди мати однаковий розмір або переходити від одного розміру до наступного при запитах медіа, розмір може бути нестабільним.

Ось математика, кредит Майк Рітмюллер:

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, щоб допомогти ...

У Сасс

Ви можете зробити (досить надійний) мікс, наприклад:

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

Ось ще один приклад Майка, який дає рівномірний ритм:

Розширення ідеї до заголовків за допомогою модульної шкали

Модульна шкала, тобто чим більше вільного місця, тим драматичніше різний за розміром. Можливо, у найбільшому вікні перегляду кожен заголовок вгору по ієрархії в 1,4 рази більший за наступний, але в найменшому - лише 1,05 рази.

Дивіться вид:

З нашим міксом Sass це виглядає так:

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

Інше читання

  • Гнучка типографіка із замками CSS Тіма Брауна
  • Правильно налаштуйте баланс: чуйний дисплейний текст Річарда Руттера
  • Приклади рідинного типу від Майка Рітмюллера