Bu sayfa, Cloud Translation API ile çevrilmiştir.

CSS min(), max() ve clamp()

İyi desteklenen bu CSS işlevlerini kullanarak öğe boyutlandırmasını kontrol etmeyi, boşlukları doğru biçimde kullanmayı ve değişken yazı biçimi uygulamayı öğrenin.

Una Kravets

Duyarlı tasarım daha incelikli hale geldikçe CSS de sürekli gelişerek ve yazarlar daha fazla kontrole sahip oldu. min(), max() ve clamp() işlevleri, tüm modern tarayıcılarda desteklenen Böylece daha dinamik ve duyarlı web siteleri ve uygulamalar oluşturabilirsiniz. Şunları kullanabilirsiniz: öğe boyutlandırmasını ve yeniden boyutlandırmasını kontrol eden fonksiyonlar, ve esnek ve akıcı bir tipografi oluşturmanız gerekir.

calc(), min(), max() ve clamp() matematik fonksiyonları; toplama (+), çıkarma (-), çarpma (*) ve bölme (/) içeren matematiksel ifadelerin bileşen değerleri olarak kullanılmasına olanak sağlar
CSS Değerleri ve Birim Düzeyi 4

Tarayıcı desteği

`min()`

Tarayıcı Desteği

Kaynak

`max()`

Tarayıcı Desteği

Kaynak

`clamp()`

Tarayıcı Desteği

Kaynak

Kullanım

min(), max() ve clamp() öğelerini herhangi bir CSS'nin sağ tarafında kullanabilirsiniz ifadeleri kullanın. min() ve max() için bir bir bağımsız değişken değerleri listesi oluşturur ve tarayıcı hangisinin en küçük veya en büyüktür. Örneğin, width: min(1rem, 50%, 10vw) örneğinde, tarayıcı, bu göreli birimlerden hangisinin en küçük olduğunu hesaplar ve öğenin genişliği için ayarlanır.

min() işlevi, bu Codepen demosu.

max() işlevi, maksimum değer için aynı şeyi yapar.

max() işlevi bu Codepen demosu.

clamp() özelliğini kullanmak için şu üç değeri girin: minimum değer, şunun için ideal değer: bir maksimum değer belirtir.

clamp() işlevi, değerini belirtilen minimum değer ile Codepen demosunda maksimum

Bu işlevleri <length>, <frequency>, <angle>, <time>, <percentage>, <number> veya <integer>'a izin verilir. Siz kendi başlarına kullanabilir (font-size: max(0.5vw, 50%, 2rem) ürününde olduğu gibi) calc() (font-size: max(calc(0.5vw - 1em), 2rem) olduğu gibi) veya bestelenen (şu şekilde:) font-size: max(min(0.5vw, 1em), 2rem)) tıklayın.

Aşağıda, bu işlevlerin nasıl kullanılacağına dair bazı örnekler verilmiştir.

Mükemmel genişlik

Tipografik Öğeleri'ne göre Stil Robert Bringhurst'e göre, "45 ila 75 karakterden oluşan her şey serifli metin yüzünde ayarlanmış tek sütunlu bir sayfa için tatmin edici satır uzunluğu girin."

Metin bloklarınızın 45 ila 75 karakter genişliğinde kalmasını sağlamak için clamp() ve ch (0 genişlikli karakter ilerletme) birim:

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

Bu, tarayıcının paragrafın genişliğini belirlemesine olanak tanır. Genişliği Varsayılan olarak% 50. %50, 45ch değerinden küçükse genişlik olarak 45ch değerini kullanır %50, 75ch değerinden genişse 75ch değerini kullanır.

Minimum ve maksimum genişliği ayarlamak için clamp() işlevini kullanın. Codepen'deki demoyu izleyin.

Yalnızca min() veya max() kullanarak da bölebilirsiniz. URL'nin öğesi, her zaman 50% genişliğinde olacak ve daha büyük boyutlu cihazlarda genişliği 75ch aşmayacak şekilde ekranlarında, maksimum boyutu ayarlamak için width: min(75ch, 50%); kullanın.

Maksimum genişliği ayarlamak için min() işlevini kullanın.

Aynı şekilde, max() kullanarak okunabilir metin için minimum boyut ayarlayabilirsiniz işlevini kullanın.width: max(45ch, 50%); Bu aşamada, tarayıcı değer daha büyüktür. Diğer bir deyişle, öğe 45ch veya daha büyük olmalıdır.

Minimum genişliği ayarlamak için max() işlevini kullanın.

Dolguyu yönet

Minimum dolgu boyutunu ayarlamak için max() değerini de kullanabilirsiniz. Bu örnek, CSS Püf Noktaları Caluã de Lacerda Pataca şu fikrini paylaştı: Bir elementin Büyük ekran boyutlarında ek dolgu ancak daha küçük boyutta bir minimum dolgu ekran boyutlarına bağlı. Bunun için, calc() veya max() işlevini kullanın ve minimum değerden çıkarın öğenin her iki tarafından dolgu: calc((100vw - var(--contentWidth)) / 2), veya max(2rem, 50vw - var(--contentWidth) / 2). Stil sayfanızda, aşağıdaki gibi görünür:

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

max() işlevini kullanarak bir bileşen için minimum dolgu ayarlayın. Codepen'deki demoyu izleyin.

Değişken tipografi

Değişken tipografiyi etkinleştirmek için Mike Riethmeuller, bir tekniği popüler hale getirdi clamp() işlevini kullanarak minimum yazı tipi boyutunu, maksimum yazı tipi boyutunu ve bu boyutlar arasında ölçeklendirme sağlar.

Değişken tipografi oluşturmak için clamp() kullanın. Codepen'deki demoyu izleyin.

clamp(), tarihinden önce, yazı tipi ölçeklendirmeyi tasarlamak karmaşık stil dizeleri gerektiriyordu. Şimdi, tarayıcının bu işi sizin yerinize yapmasına izin verebilirsiniz. Kabul edilebilir minimum yazı tipini belirleyin boyut (örneğin, başlık için 1.5rem), maksimum boyut (ör. 3rem) ve ideal boyut (5vw gibi). Artık sayfanın mevcut tasarımına göre ölçeklendirilen bir tipografiniz sınırlayıcı minimum ve maksimum değerlere ulaşıncaya kadar kodu kullanabilirsiniz:

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

Diğer kaynaklar

Şu tarihte @yer_a_wizard numarasından kapak resmi Lansmanı kaldırın.