Teknik1 dk okuma
Akıcı Tipografi & CSS clamp() Matematiği
Media query kalabalığına son: Tek bir satırla mobilden 4K ekrana kusursuz ölçeklenen yazılar.
Eski yöntemde mobil için font-size: 24px, tablet için font-size: 32px, masaüstü için font-size: 48px yazıp onlarca @media kuralı eklerdik. Ekran boyutu değiştikçe yazı boyutu basamaklı şekilde sıçrardı.
Canlı clamp() Simülatörü
Aşağıdaki interaktif simülatörde ekran genişliğini kaydırarak metnin akıcı ve kesintisiz şekilde nasıl büyüdüğünü canlı test edin:
Akıcı Tipografi & CSS clamp() Simülatörü
Ekran genişliğini kaydırarak metnin akıcı büyümesini izleyin
Akıcı ve Ölçeklenebilir Başlık.
Genişlik: 768px ➔ Hesaplanan Boyut: 29.9px
Mobil (320px)
768px SimülasyonMasaüstü (1440px)
Formülün Mantığı
font-size: clamp(MIN, VAL, MAX); formülü üç değer alır:
- MIN (Minimum): Mobilde inebileceği en küçük boyut (örn:
1.25rem) - VAL (İdeal / Dinamik Değer): Ekran genişliğiyle (
vw) orantılı hesaplanan değer (örn:0.8rem + 2.2vw) - MAX (Maksimum): Geniş ekranlarda çıkabileceği tavan boyut (örn:
2.75rem)