在此演示中,您将使用 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%;
}