Genel Bakış
Değişken ölçeklendirme, bileşenlerin mevcut boyutlarına göre iç oranlarını (yazı tipi boyutları ve boşluklar gibi) ayarlamasına olanak tanır. Bu sayede, sabit kesme noktaları arasında geçiş yapmaktan daha tutarlı bir tasarım elde edilir.
Akışkan ölçeklendirme geçmişte görüntü alanı birimleri kullanılarak (ekran boyutuna göre ölçeklendirme) elde edilirken modern kapsayıcı sorgu birimleri, bileşenlerin üst kapsayıcılarına göre ölçeklendirilmesine olanak tanır. Bu sayede bileşenler, düzende nerede yer aldıklarından bağımsız olarak iyi görünür. Böylece bileşenlerin daha iyi yalıtılması ve tekrar kullanılabilirliği sağlanır.
Uygulama
1. Kapsayıcı tanımlama
Kapsayıcı sorgu birimlerini kullanmak için önce bir üst öğede kapsama bağlamı tanımlamanız gerekir.
.component-wrapper {
/* Define the container type. Use 'inline-size' for width-based scaling. */
/* You can also use 'size' for both width and height, but it requires explicit sizing. */
container-type: inline-size;
/* Optional: Name the container for specific targeting */
container-name: fluid-card;
}
2. Kapsayıcı sorgu birimlerini kullanma
Boyutları kapsayıcının boyutlarına göre ayarlamak için kapsayıcı sorgu birimlerini (cqi, cqb vb.) kullanın.
cqi: Kapsayıcının satır içi boyutunun (yatay yazma modlarında genişlik) %1'i.cqb: Kapsayıcının blok boyutunun (yatay yazma modlarında yükseklik) %1'i.
Not: Kapsayıcı birimleri, @container sorgu kuralına gerek olmadan doğrudan herhangi bir mülkte kullanılabilir. Tanımlanmış bir container-type içeren en yakın üst öğeye göre otomatik olarak çözümlenirler.
.component-title {
/* Scale font size based on container width */
/* 10cqi means 10% of the container's width */
font-size: 10cqi;
}
.component-body {
/* Scale padding based on container width */
padding: 5cqi;
}
3. Değerleri clamp() ile kısıtlayın
Boyutların çok küçük veya çok büyük olmasını önlemek için CSS clamp() işlevini kullanın. Bu durum, kullanıcının yakınlaştırma veya temel yazı tipi boyutunu ayarlama imkanını etkiler. Metnin erişilebilirlik kurallarına uyması için maksimum boyut, minimum boyutun 2,5 katından fazla olmamalıdır.
.component-title {
/* Clamp font size between 1rem and 2.5rem, scaling with 5% of container width */
font-size: clamp(1rem, 5cqi, 2.5rem);
}
Yedek stratejiler
Tarayıcı, kapsayıcı sorgularını desteklemiyorsa görüntü alanı birimlerini veya standart medya sorgularını kullanarak bir yedek sağlamanız gerekir.
.component-title {
/* Fallback for browsers that do not support container units */
font-size: clamp(1rem, 5vw, 2.5rem);
}
@supports (font-size: 1cqi) {
.component-title {
/* Use container units where supported */
font-size: clamp(1rem, 5cqi, 2.5rem);
}
}
Bu yedek, metnin ölçeklendirilmeye devam etmesini sağlar ancak bu işlem, bileşenin genişliğine değil ekranın genişliğine göre yapılır. Bu çözümün kullanım alanınızda işe yarayıp yaramadığını doğrulamak için test edilmesi gerekir.