Sabitleme kartı

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.

HTML

<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>

CSS

        .parent {
  display: grid;
  place-items: center;
}

.card {
  width: clamp(23ch, 60%, 46ch);
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.visual {
    height: 125px;
    width: 100%;
  }