min(), max() ve kelepçe(): bugün kullanılacak üç mantıksal CSS işlevi

Duyarlı tasarımın gelişmesi ve giderek daha incelikli hale gelmesiyle, CSS’nin kendisi sürekli olarak gelişmekte ve yazarlara daha fazla kontrol sağlamaktadır. bu min(), max()Ve clamp() Artık tüm modern tarayıcılarda desteklenen işlevler, web sitelerini ve uygulamalarını daha dinamik ve duyarlı hale getiren en son araçlar arasındadır.

Esnek ve akıcı tipografi, kontrollü öğelerin yeniden boyutlandırılması ve uygun aralığın korunması söz konusu olduğunda, min(), max()Ve clamp() yardım edebilir.

Arka plan #

matematik fonksiyonları, calc(), min(), max()Ve clamp() toplama (+), çıkarma (-), çarpma ile matematiksel ifadelere izin verir

ve bölme (/) bileşen değerleri olarak kullanılacak

CSS Değerleri Ve Birimleri Seviye 4 tarayıcı desteği

min() #

max() Kaynak

clamp() Kaynak

# Kullanım

Codepen’de Demo’ya bakın. min()Kullanabilirsiniz max(), clamp() Ve min() mantıklı olacağı herhangi bir CSS ifadesinin sağ tarafında. İçin max()Ve min(1rem, 50%, 10vw), bir bağımsız değişken listesi sağlarsınız ve tarayıcı hangisinin sırasıyla en küçük veya en büyük olduğunu belirler. Örneğin, şu durumda:

Codepen’de Demo’ya bakın. max() bu

Codepen’de Demo’ya bakın. clamp() Kullanmak

üç değer girin: minimum değer, ideal değer (hesaplanacak) ve maksimum değer. &LTlength>Bu işlevlerden herhangi biri herhangi bir yerde kullanılabilir. &LTfrequency>, &LTangle>, &LTtime>, &LTpercentage>, &LTnumber>, &LTinteger> veya font-size: max(0.5vw, 50%, 2rem)izin verilir. Bunları kendi başlarına kullanabilirsiniz (örn. calc() ), ile birlikte font-size: max(calc(0.5vw - 1em), 2rem)(yani font-size: max(min(0.5vw, 1em), 2rem)) veya bestelenmiş (yani

.

• min(&LTvalue-list>)Özetlemek için:
• max(&LTvalue-list>): virgülle ayrılmış ifadeler listesinden en küçük (en negatif) değeri seçer
• clamp(&LTmin>, &LTideal>, &LTmax>): virgülle ayrılmış ifadeler listesinden en büyük (en pozitif) değeri seçer

: ayarlanan ideal değere dayalı olarak bir değeri üst ve alt sınır arasında sıkıştırır

Bazı örneklere bir göz atalım. mükemmel genişlik

# Buna göre Tipografik Tarzın Unsurları

Robert Bringhurst tarafından, “45 ila 75 karakter arasındaki herhangi bir şey, metin boyutunda tırnaklı bir metin yüzünde ayarlanmış tek sütunlu bir sayfa için tatmin edici bir satır uzunluğu olarak kabul edilir.” clamp() Metin bloklarınızın 45 karakterden dar veya 75 karakterden geniş olmadığından emin olmak için şunu kullanın: ch ve (0 genişlikkarakter ilerlemesi

p {
width: clamp(45ch, 50%, 75ch);
}

) birim: 45chBu, tarayıcının paragrafın genişliğini belirlemesini sağlar. %50’den küçük olmadığı sürece genişliği %50 olarak ayarlayacaktır. 45ch hangi noktada 75chseçilecek ve %50 daha genişse tam tersi

Codepen’de Demo’ya bakın. min() Bunu sadece max() veya 50% işlev. Elemanın her zaman olmasını istiyorsanız 75ch genişliği ve geçmemesi width: min(75ch, 50%);genişliğinde (yani daha büyük ekranlarda), şunu yazın: min() . Bu, esasen kullanarak bir “maks” boyut ayarlar.

Maksimum genişliği ayarlamak için min() işlevini kullanma. max() Aynı şekilde, okunabilir metin için minimum boyutu da sağlayabilirsiniz. width: max(45ch, 50%);işlev. Bu şöyle görünür: 45ch . Burada tarayıcı hangisi daha büyükse onu seçer, 50%veya öğenin olması gerektiği anlamına gelir 45ch en az

Minimum genişliği ayarlamak için max() işlevini kullanma. Dolgu yönetimi

# min() Yukarıdakiyle aynı konsepti kullanarak, burada max() işlevi bir “maks” değer ayarlayabilir ve max() bir “min” değeri ayarlar, kullanabilirsiniz Minimum dolgu boyutunu ayarlamak için. Bu örnek geliyorCSS Püf Noktaları calc() Caluã de Lacerda Pataca okuyucusunun şu fikri paylaştığı yer: Fikir, bir öğenin daha büyük ekran boyutlarında ek dolguya sahip olmasını sağlamak, ancak daha küçük ekran boyutlarında, özellikle satır içi dolguda minimum dolguyu korumaktır. Bunu başarmak için, kullanın calc((100vw - var(--contentWidth)) / 2)ve minimum dolguyu her iki taraftan da çıkarın: , veya max(2rem, 50vw - var(--contentWidth) / 2)maks. kullan:

footer {
padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}

Codepen’de Demo’ya bakın. Akışkan tipografi

# etkinleştirmek içinakışkan tipografi , Mike Riethmeuller clamp() kullanan bir tekniği popüler hale getirdi.

Codepen’de Demo’ya bakın. clamp()İle 1.5rem , bunu daha açık yazabilirsiniz. Karmaşık bir dize gerektirmek yerine, tarayıcı işi sizin yerinize yapabilir. Kabul edilebilir minimum yazı tipi boyutunu ayarlayın (örneğin, 3rembir başlık için, maksimum boyut (örn. 5vw) ve ideal boyutu

.

p {
font-size: clamp(1.5rem, 5vw, 3rem);
}

Uyarı Çözüm

# min()CSS matematik fonksiyonları, max(), clamp() Ve

çok güçlüdürler, iyi desteklenirler ve duyarlı kullanıcı arayüzleri oluşturmanıza yardımcı olmak için tam da aradığınız şey olabilirler. Daha fazla kaynak için göz atın: Kapak resmi: @yer_a_wizard