Nesta demonstração, você está definindo a largura usando clamp()
, desta forma: width: clamp(<min>, <actual>, <max>)
.
Isso define um tamanho mínimo e máximo absolutos e um tamanho real. Com valores, eles podem ficar assim:
.parent {
width: clamp(23ch, 60%, 46ch);
}
O tamanho mínimo aqui é de 23ch
ou 23 unidades de caracteres, e o tamanho máximo é de 46ch
(46 caracteres). As unidades de largura de caractere são baseadas no tamanho da fonte do elemento, especificamente na largura do glifo 0
. O tamanho "real" é de 50%, que representa 50% da largura do elemento pai.
O que a função clamp()
faz aqui é permitir que esse elemento retenha uma largura de 50% até que 50% seja maior que 46ch
(em janelas de visualização mais largas) ou menor que 23ch
(em janelas de visualização menores). No vídeo, veja como a largura desse card aumenta até o ponto máximo fixado e diminui até o mínimo fixado à medida que o pai é esticado e reduzido. Ela vai ficar centralizada no pai usando outras propriedades para centralizá-lo. Isso permite layouts mais legíveis, porque o texto não vai ser muito largo (acima de 46ch
) nem muito apertado e estreito (menos de 23ch
).
É possível usar essa técnica para implementar a tipografia responsiva. Por exemplo, font-size: clamp(1.5rem, 20vw, 3rem)
. Nesse caso, o tamanho da fonte de um título sempre fica limitado entre 1.5rem
e 3rem
, mas aumenta e diminui com base no valor real de 20vw
para se ajustar à largura da janela de visualização.
Essa é uma ótima técnica para garantir a legibilidade com um valor de tamanho mínimo e máximo, mas lembre-se de que ela não é compatível com todos os navegadores modernos, portanto, verifique se você tem substitutos e faça seus testes.
<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%;
}