Зажимная карта

В этой демонстрации вы устанавливаете ширину с помощью clamp() следующим образом: width: clamp(<min>, <actual>, <max>) .

Это устанавливает абсолютный минимальный и максимальный размер, а также фактический размер. Со значениями это может выглядеть так:

.parent {
  width: clamp(23ch, 60%, 46ch);
}

Минимальный размер здесь составляет 23ch или 23 символа, а максимальный размер — 46ch , 46 символов. Единицы ширины символов основаны на размере шрифта элемента (в частности, на ширине 0 глифа). «Фактический» размер составляет 50 %, что соответствует 50 % ширины родительского элемента.

Здесь функция clamp() позволяет этому элементу сохранять ширину 50% до тех пор , пока 50% не станет больше 46ch (на более широких окнах просмотра) или меньше 23ch (на меньших окнах просмотра). В видеоролике посмотрите, как ширина этой карты увеличивается до зафиксированной максимальной точки и уменьшается до зафиксированного минимума по мере того, как родительская карта растягивается и сжимается. Затем он остается в центре родителя, используя дополнительные свойства для его центрирования. Это обеспечивает более разборчивость макетов, поскольку текст не будет слишком широким (более 46ch ) или слишком сжатым и узким (менее 23ch ).

Вы можете использовать эту технику для реализации адаптивной типографики. Например: font-size: clamp(1.5rem, 20vw, 3rem) . В этом случае размер шрифта заголовка всегда будет оставаться в пределах от 1.5rem до 3rem , но будет увеличиваться и уменьшаться в зависимости от фактического значения 20vw , чтобы соответствовать ширине области просмотра.

Это отличный способ обеспечить читаемость с помощью минимального и максимального значения размера, но помните, что он поддерживается не всеми современными браузерами, поэтому убедитесь, что у вас есть запасные варианты, и проведите тестирование.

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%;
  }