Langkau ke kandungan
WANCODE
EN

Tipografi Fluid dengan clamp()

Saiz fon yang membesar dengan lancar mengikut skrin antara nilai minimum dan maksimum — tanpa merosakkan zoom pelayar.

Pratonton langsung Buka dalam Playground
fluid-type.css
/*
  Fluid type scale: each step grows smoothly from a 360px viewport
  to a 1280px viewport, then stops.
  Formula: clamp(MIN, INTERCEPT + SLOPE, MAX)
*/
:root {
  --step--1: clamp(0.8rem, 0.76rem + 0.16vw, 0.89rem);
  --step-0: clamp(1rem, 0.9rem + 0.43vw, 1.25rem);
  --step-1: clamp(1.25rem, 1.05rem + 0.87vw, 1.75rem);
  --step-2: clamp(1.56rem, 1.22rem + 1.52vw, 2.44rem);
  --step-3: clamp(1.95rem, 1.38rem + 2.55vw, 3.42rem);
}

body {
  font-size: var(--step-0);
  line-height: 1.6;
}

h1 { font-size: var(--step-3); line-height: 1.1; }
h2 { font-size: var(--step-2); line-height: 1.2; }
h3 { font-size: var(--step-1); line-height: 1.3; }
small { font-size: var(--step--1); }

clamp(MIN, PREFERRED, MAX) pulangkan nilai pilihan, tetapi tak pernah kurang daripada MIN dan tak lebih daripada MAX. Jika nilai pilihan bergantung pada lebar viewport (vw), saiz fon membesar mengikut skrin dan berhenti di kedua-dua hujung.

Dari mana datangnya nombor ini

Ambil --step-0: kita mahu 16px pada skrin selebar 360px dan 20px pada 1280px. Itu satu garis lurus:

  1. Kecerunan (slope) = (20 − 16) ÷ (1280 − 360) = 0.00435 → dalam unit viewport itu 0.43vw (1vw ialah 1% daripada lebar).
  2. Pintasan (intercept) = 16 − 0.00435 × 360 ≈ 14.4px ≈ 0.9rem (dengan andaian saiz root lalai 16px).
  3. Hasilnya: clamp(1rem, 0.9rem + 0.43vw, 1.25rem). Semak: pada 360px, 14.4 + 1.56 ≈ 16px; pada 1280px, 14.4 + 5.6 = 20px.

Jangan guna vw sahaja

font-size: 3vw abaikan tetapan saiz fon pengguna dan hampir tak berubah bila mereka zoom, yang boleh gagal WCAG 1.4.4 (Resize Text). Campurkan bahagian rem dalam nilai pilihan — dan guna rem untuk min/max — supaya zoom dan pilihan pengguna terus berfungsi.

Langkah lain guna kaedah yang sama dengan nisbah 1.25 antara langkah di hujung kecil dan kira-kira 1.4 di hujung besar, jadi tajuk membesar lebih cepat daripada teks biasa.

Cara guna

CSS
/* Use the steps anywhere, not just on headings */
.hero-title {
  font-size: var(--step-3);
}

.card p {
  font-size: var(--step--1);
}