夹具

在此演示中,您将使用 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.5rem3rem 之间,但会根据 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%;
  }