Bu demoda genişliği, clamp()
kullanarak şu şekilde ayarlıyorsunuz: width: clamp(<min>, <actual>, <max>)
.
Bu yöntem, mutlak bir minimum ve maksimum boyut ile gerçek bir boyutu ayarlar. Değerler kullanılarak şöyle görünebilir:
.parent {
width: clamp(23ch, 60%, 46ch);
}
Burada minimum boyut 23ch
veya 23 karakter, maksimum boyut ise 46ch
46 karakterdir. Karakter genişliği birimleri, öğenin yazı tipi boyutuna (özellikle 0
glifin genişliğine) bağlıdır. "Gerçek" boyut %50'dir ve bu, bu öğenin üst genişliğinin% 50'sini temsil eder.
clamp()
işlevinin burada yaptığı şey, bu öğenin% 50 genişliği 46ch
değerinden büyük (geniş görüntü alanlarında) veya 23ch
değerinden küçük (küçük görüntü alanlarında) kadar% 50'yi korumasını sağlamaktır. Videoda, üst kart geri çekilip küçülürken bu kartın genişliğinin sabitlenmiş maksimum noktasına nasıl arttığını ve sabitlenmiş minimum noktasına nasıl düştüğünü izleyin. Daha sonra, ortalamak için ek özellikler kullanarak üst öğenin ortasında kalır. Metin çok geniş (46ch
üzerinde) veya çok sıkıştırılmış ve dar (23ch
değerinden az) olmayacağından bu yöntem daha okunaklı düzenler.
Duyarlı yazı biçimi uygulamak için bu tekniği kullanabilirsiniz. Örneğin: font-size: clamp(1.5rem, 20vw, 3rem)
. Bu durumda, bir başlığın yazı tipi boyutu her zaman 1.5rem
ile 3rem
arasında sabitlenmiş olarak kalır ancak görüntü alanının genişliğine sığması için 20vw
gerçek değerine göre büyüyüp daralır.
Bu, minimum ve maksimum boyut değeriyle okunabilirliği sağlamak için harika bir tekniktir ancak tüm modern tarayıcılarda desteklenmediğini unutmayın. Bu nedenle, yedeklerinizin olduğundan ve testlerinizi yaptığınızdan emin olun.
<div class="parent">
<div class="card">
<h1>Title Here</h1>
<div class="visual"></div>
<p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
</div>
</div>
.parent {
display: grid;
place-items: center;
}
.card {
width: clamp(23ch, 60%, 46ch);
display: flex;
flex-direction: column;
padding: 1rem;
}
.visual {
height: 125px;
width: 100%;
}