Responsive Typography — clamp(), fluid typography

~15 daq · CSS · Pozitsiya va Responsive

Muammodan boshlaylik

Bosh sahifadagi katta sarlavha: kompyuterda 64px — chiroyli va ta'sirli. Telefonda esa bir so'z bitta qatorga sig'maydi, sarlavha 4 qatorga bo'linib, butun ekranni egallaydi.

Media query bilan "tuzatasiz":

h1 { font-size: 2rem; }
@media (min-width: 640px)  { h1 { font-size: 2.5rem; } }
@media (min-width: 1024px) { h1 { font-size: 3.25rem; } }
@media (min-width: 1280px) { h1 { font-size: 4rem; } }

Ishlaydi, lekin sakrab: 1023px da — 40px, 1024px da — birdaniga 52px. Har bir sarlavha, har bir bo'shliq uchun to'rtta qoida. Va 700px yoki 1500px kabi oraliq o'lchamlarda baribir ideal emas.

Kerak — shrift ekran bilan silliq o'zgarsin, va pastki-yuqori chegaralari bo'lsin. Bu — fluid typography, va uning vositasi — clamp().

clamp() — chegaralangan qiymat

h1 {
  font-size: clamp(2rem, 1rem + 4vw, 4rem);
}

clamp(MIN, AFZAL, MAX):

  • AFZAL qiymat ishlatiladi — odatda ekranga bog'liq (vw)
  • Lekin u MIN dan kichik bo'lmaydi va MAX dan katta bo'lmaydi
font-size
  4rem ┤                        ┌────────────  MAX (katta ekranlarda to'xtaydi)
       │                      ╱
       │                    ╱      ← silliq o'sish: 1rem + 4vw
       │                  ╱
  2rem ┤─────────────────┘                     MIN (telefonda to'xtaydi)
       └─────────────────┬──────┬─────────────→ ekran kengligi
                       400px  1200px

To'rtta media query o'rniga — bitta qator, va hech qanday "sakrash" yo'q.

Nima uchun faqat vw emas

h1 { font-size: 5vw; }    /* ❌ */

Uchta muammo:

  1. Telefonda juda kichik: 320px × 5% = 16px — sarlavha oddiy matndan farq qilmaydi
  2. Katta monitorda juda katta: 2560px × 5% = 128px
  3. Zoom ishlamaydi: vw faqat ekran kengligiga bog'liq — foydalanuvchi brauzerda kattalashtirsa (Ctrl +) yoki shrift sozlamasini oshirsa, matn o'zgarmaydi. Bu ko'rish qobiliyati past foydalanuvchilar uchun jiddiy muammo (va WCAG talabiga zid)

clamp() birinchi ikkitasini hal qiladi. Uchinchisi uchun — afzal qiymatda rem + vw aralashmasi:

font-size: clamp(2rem, 1rem + 4vw, 4rem);
/*                     ↑ rem qismi zoom ga javob beradi */

rem qismi foydalanuvchi sozlamasi bilan kattalashadi (11-dars), vw qismi ekran bilan.

Qiymatlarni hisoblash

"Ekran 400px da 32px, 1200px da 64px bo'lsin" — afzal qiymatni qanday topish?

O'sish:       (64 − 32) / (1200 − 400) = 32 / 800 = 0.04  →  4vw
Boshlang'ich: 32 − 0.04 × 400 = 32 − 16 = 16px            →  1rem

Natija:  clamp(2rem, 1rem + 4vw, 4rem)

Har safar qo'lda hisoblash shart emas — onlayn kalkulyatorlar bor (masalan, Utopia — utopia.fyi): minimal va maksimal ekran va shrift o'lchamini kiritasiz, tayyor clamp() olasiz. Utopia butun shkalani (h1 dan small gacha) bir-biriga mos qilib beradi.

Tipografiya shkalasi — o'zgaruvchilarda

:root {
  --text-sm:   clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --text-2xl:  clamp(2rem, 1.4rem + 3vw, 3.5rem);
  --text-3xl:  clamp(2.5rem, 1.5rem + 5vw, 5rem);
}

body { font-size: var(--text-base); }
h1   { font-size: var(--text-3xl); line-height: 1.1; }
h2   { font-size: var(--text-2xl); line-height: 1.2; }
h3   { font-size: var(--text-xl); }
.caption { font-size: var(--text-sm); }

Kichik o'lchamlar deyarli o'zgarmaydi (oddiy matn har qanday ekranda o'qiladigan bo'lishi kerak), katta sarlavhalar esa ko'proq o'sadi — telefonda ixcham, katta ekranda ta'sirli.

Faqat shrift emas — bo'shliqlar ham

clamp() istalgan uzunlik uchun ishlaydi:

:root {
  --space-section: clamp(3rem, 2rem + 5vw, 8rem);
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
}

.section {
  padding-block: var(--space-section);   /* telefonda 48px, katta ekranda 128px */
}

.container {
  padding-inline: var(--gutter);
}

Telefonda bo'limlar orasidagi bo'shliq kichik (ekran tor — har bir piksel qimmat), katta ekranda — keng va "nafas oladigan".

min() va max()

clamp() ning qisqa "yarim" variantlari (32-dars):

.container {
  width: min(100% - 2rem, 1200px);    /* 1200px dan katta emas, chetlarda 1rem bo'shliq */
}

.sidebar {
  width: max(250px, 20%);             /* kamida 250px */
}

Container query birliklari

Komponent ekranga emas, konteyneriga qarab o'lchansin (26-dars):

.card-wrap {
  container-type: inline-size;
}

.card h3 {
  font-size: clamp(1rem, 0.8rem + 3cqi, 1.5rem);
}

cqi — konteyner kengligining 1% (vw ning konteyner versiyasi). Sidebar dagi tor kartochkada sarlavha kichik, asosiy qismdagi keng kartochkada — katta.

O'qiluvchanlik — chegaralar

Fluid typography bilan ham 12-dars qoidalari amal qiladi:

  • Asosiy matn 16px dan kam bo'lmasin — MIN qiymat buni kafolatlasin
  • Qator uzunligi — max-width: 65ch (11-dars)
  • MAX ni haddan oshirmang: 2560px monitorda 120px sarlavha — chiroyli emas
  • Natijani 200% zoom da tekshiring (WCAG): matn kattalashishi va hech narsa ustma-ust tushmasligi kerak

Nima uchun shunday?

Nima uchun silliq o'zgaruvchan o'lchamlar breakpoint lardan yaxshiroq?

Chunki ekranlar uzluksiz — 320px dan 3840px gacha istalgan kenglik bor, va foydalanuvchi brauzer oynasini istalgan o'lchamga keltira oladi. Breakpoint lar bu uzluksiz diapazonni bir nechta "qutiga" bo'ladi va har bir quti ichida dizayn faqat bitta nuqta (qutining boshi) uchun ideal; qolgan joylarda — taxminan. Fluid qiymatlar esa har bir kenglik uchun mos o'lchamni hisoblaydi, va siz faqat ikki chetni (eng kichik va eng katta) belgilaysiz. Kam kod, kam istisno va oraliq o'lchamlarda ham to'g'ri natija. Media query lar esa haqiqatan tuzilma o'zgarganda (ustunlar soni, menyu turi) kerak bo'lib qoladi — o'lchamlarni "silliqlash" uchun emas.

Xulosa

Eslab qoling:

  • clamp(MIN, AFZAL, MAX) — chegaralangan, silliq o'zgaruvchan qiymat
  • Faqat vw — telefonda kichik, monitorda katta, zoom ishlamaydi
  • Afzal qiymat — rem + vw aralashmasi: clamp(2rem, 1rem + 4vw, 4rem)
  • Hisoblash: o'sish = Δshrift / Δekran → vw; yoki Utopia kalkulyatori
  • Shkala — CSS o'zgaruvchilarida; kichik o'lchamlar kam o'zgaradi, sarlavhalar ko'p
  • Bo'shliqlar uchun ham: padding-block: clamp(...)
  • cqi — konteynerga nisbatan
  • MIN ≥ 16px matn uchun; 200% zoom da tekshiring

Keyingi bo'lim

6-bo'lim: Animatsiya va Ilg'or mavzular — transition, transform, @keyframes, zamonaviy selektorlar va funksiyalar.