CSS clamp() kalkulyatoru
Ən kiçik və ən böyük şrift ölçüsünü, həmçinin onlara aid ekran enlərini yazın — alət clamp() düsturunu hesablayır, şrift ölçüsünün ekran enindən asılılığını qrafikdə göstərir və font-size üçün hazır CSS verir.
h1 {
font-size: clamp(1rem, 0.6667rem + 1.6667vw, 2rem);
}Necə istifadə etmək olar
- Minimum və maksimum şrift ölçüsünü piksellə yazın, məsələn, telefonda
16px, geniş ekranda32px. - Şriftin böyüməyə başladığı və dayandığı ekran enlərini seçin: adətən
320pxvə1280px. - Nəticənin vahidini seçin:
rem(tövsiyə olunur) və yapx.remüçün root şrift ölçüsünü yoxlayın, adətən16. - Qrafikdəki işarəni sürüşdürün və ya «Yoxlanılan ekran eni» sürgüsünü çəkin — nümunə başlıq həmin en üçün hesablanmış ölçüdə göstərilir. Kodu götürmək üçün «Kopyala» düyməsini basın.
Bu necə işləyir
Düstur necə işləyir
Şrift ölçüsü iki nöqtədən keçən düz xətt üzrə dəyişir: (minVw, min) və (maxVw, max). Maillik slope = (max − min) / (maxVw − minVw), sürüşmə isə intercept = min − slope × minVw kimi tapılır. CSS-də maillik vw ilə yazılır: 1vw pəncərə enin 1%-dir, ona görə slope × 100 götürülür. Nəticə clamp(min, intercept + slope×100vw, max) olur: minimum endən aşağıda ölçü sabitdir, iki en arasında artır, maksimum endən yuxarıda yenə sabit qalır.
font-size: clamp(1rem, 0.6667rem + 1.6667vw, 2rem);Niyə düsturda rem də lazımdır
Yalnız vw ilə yazılmış ölçü (font-size: 2vw) səhifəni böyütdükdə (zoom) böyümür: zoom zamanı pəncərənin eni CSS-piksellə kiçilir və mətnin ekrandakı real ölçüsü dəyişmir. Bu, WCAG 1.4.4 Resize Text meyarını pozur — mətn 200%-ə qədər böyüdülə bilməlidir. rem hissəsi həm zoom-a, həm də brauzer ayarlarındakı şrift ölçüsünə reaksiya verir; rem ilə yazılmış sərhədlər də böyüyür. Tez-tez deyilən qayda: maksimum ölçü minimumun təxminən 2,5 mislindən çox olmasın.
min(), max() və clamp()
clamp(MIN, VAL, MAX) həm aşağı, həm yuxarı sərhədi birlikdə qoyur və max(MIN, min(VAL, MAX)) ilə eynidir. min() yalnız yuxarıdan, max() yalnız aşağıdan məhdudlaşdırır.
font-size: min(5vw, 3rem); /* 3rem-dən böyük olmaz */
font-size: max(1rem, 2vw); /* 1rem-dən kiçik olmaz */clamp() təkcə şrift üçün deyil
Uzunluq qəbul edən istənilən xassə onu dəstəkləyir: padding, margin, gap, width. Axıcı boşluqlar mətnlə birlikdə nisbəti saxlayır. Boşluqlar üçün çox vaxt sadə clamp(1rem, 5vw, 3rem) kifayətdir, kalkulyatorun orta hədli isə iki en arasında dəqiq keçid lazım olanda yarayır.
padding-inline: clamp(1rem, 5vw, 3rem);
gap: clamp(0.75rem, 2vw, 2rem);Tez-tez verilən suallar
clamp() şrift üçün media-sorğulardan nə ilə yaxşıdır?
Media-sorğular ölçünü breykpointlərdə pillə-pillə dəyişir, clamp() isə eninin hər pikselində hamar dəyişir. Daha az qayda və breykpoint lazımdır. Dizayn dəqiq pilləli ölçülər tələb edirsə, media-sorğular yenə yerinə düşür.
Min və maks ekran eni üçün hansı dəyərləri seçməli?
Ən çox 320px (kiçik telefon) və 1280–1440px (noutbuk və ya konteynerin maksimum eni) götürülür. Maksimumu məzmun enine yaxın seçin: ondan sonra mətn artıq böyümür. Nəzərə alın ki, vw klassik sürüşdürmə zolağının enini də daxil edir.
Nəticəni rem, yoxsa px ilə almalı?
rem daha yaxşıdır: brauzer ayarlarındakı şrift ölçüsünü nəzərə alır və mətn böyüdülə bilən qalır. Piksel dəyərləri istifadəçinin şrift ayarını izləmir, ona görə px-i yalnız şüurlu seçimlə istifadə edin.
clamp() brauzerlərdə dəstəklənirmi?
Bəli, 2020-ci ildən bütün müasir brauzerlərdə (Chrome 79, Firefox 75, Safari 13.1) işləyir. Çox köhnə brauzerlər üçün əvvəlcə adi font-size: 1.25rem;, ardınca clamp() sətrini yazın — köhnə brauzer başa düşmədiyi sətri sadəcə buraxır.
