CSS - clamp()

概要

形式clamp(min, value, max)
サポートhttps://caniuse.com/?search=clamp

説明

value を返します。ただし、value が max より大きな時は max を、min より小さな時は min を返します。max(min, min(value, max))) と同じ意味を持ちます。

使用例

value に 50rem を指定していますが、最小 5rem、最大 10rem に制限されるので 10rem の横幅で表示されます。

CSS
.my-box {
  border: 1px solid #999;
  width: clamp(5rem, 50rem, 10rem);
}
HTML
<div class="my-box">AAA</div>
表示
AAA

関連項目

max(), min()

リンク

Copyright (C) 2022 杜甫々
初版：2022年8月28日、最終更新：2022年8月28日
http://www.tohoho-web.com/css/func/clamp.htm