試一試
font-size: clamp(1rem, 2.5vw, 2rem);
font-size: clamp(1.5rem, 2.5vw, 4rem);
font-size: clamp(1rem, 10vw, 2rem);
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
The font-size of this text varies depending on the base font of the page,
and the size of the viewport.
</div>
</section>
注意，像這些示例中一樣，使用 clamp() 設定字型大小，可以使字型大小隨視口大小增長，但不會低於最小字型大小或超過最大字型大小。它與流式排版中的程式碼效果相同，但只需一行，且無需使用媒體查詢。
語法
/* Static values */
width: clamp(200px, 40%, 400px);
width: clamp(20rem, 30vw, 70rem);
width: clamp(10vw, 20em, 100vw);
/* Calculated values */
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
width: clamp(100px, calc(30% / 2rem + 10px), 900px);
引數
clamp(min, val, max) 函式接受三個逗號分隔的表示式作為其引數。
min-
最小值是最小（最負）的值。這是允許值範圍內的下限。如果首選值小於此值，將使用最小值。
val-
首選值是表示式的值，只要結果在最小值和最大值之間，就會使用該值。
max-
最大值是最大（最正）的表示式值，如果首選值大於此上限，屬性的值將被賦予此值。
表示式可以是數學函式（更多資訊請參見 calc()）、字面量值、其他可解析為有效引數型別的表示式（如 <length>），或巢狀的 min() 和 max() 函式。對於數學表示式，你可以使用加、減、乘、除，而無需使用 calc() 函式本身。你也可以在需要時使用括號來確定計算順序。
你可以在表示式中的每個值使用不同的單位，也可以在構成任何引數的任何數學函式中使用不同的單位。
在使用此函式時，請牢記以下幾點：
- 在自動和固定佈局的表格中，涉及表格列、列表、行、行組和單元格寬度和高度百分比的數學表示式可能會被視為指定了
auto。 - 允許將
max()和min()函式作為表示式值巢狀，此時內部的函式被視為基本括號。表示式是完整的數學表示式，因此你可以直接使用加、減、乘、除，而無需使用 calc() 函式本身。 - 表示式可以是結合了加法（
+）、減法（-）、乘法（*）和除法（/）運算子的值，並使用標準的運算子優先順序規則。請確保在+和-運算元的兩邊都加上一個空格。表示式中的運算元可以是任何<length>語法值。你可以在表示式中的每個值使用不同的單位。你也可以在需要時使用括號來確定計算順序。 - 通常你會想在
clamp()函式中使用min()和max()。
返回值
clamp(MIN, VAL, MAX) 會被解析為 max(MIN, min(VAL, MAX))。
根據提供的引數，該函式返回 <length>、<frequency>、<angle>、<time>、<percentage>、<number> 或 <integer>。
正式語法
<clamp()> =
clamp( [ <calc-sum> | none ] , <calc-sum> , [ <calc-sum> | none ] )
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> =
<calc-value> [ [ '*' | / ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
示例
min()、max() 和 clamp() 的比較
在此示例中，我們有一個使用 min()、max() 和 clamp() 來響應式設定大小的網頁。
該示例透過三種方式調整頁面元素的大小：
- 文字行的長度
- 段落文字的字型大小
- 標題文字的字型大小
在這三種情況下，頁面都使用了相對於視口的單位（vw 和 <percentage>）與非相對於視口的值（rem 和 px）的組合，來設定一個隨視口寬度變化的大小，並實現最小和/或最大尺寸。
示例位於 https://mdn.github.io/css-examples/min-max-clamp/。請在新視窗中開啟它，並嘗試調整視窗寬度。
行長（由 <body> 元素的 width 控制）會隨著視窗寬度的增加而增加，但只增加到某個點（1000px），超過該點後，它將不再增加。我們使用 min() 來設定最大行長：它可以小於 1000px，但不會超過。這很有用，因為長行更難閱讀，所以我們常常希望限制行的長度。為實現這一點，我們使用 min(1000px, calc(70% + 100px))：當基於百分比的計算結果超過 1000px 時，我們切換到固定的 1000px 值。
段落文字的大小（由 <p> 元素的 font-size 控制）會隨著視窗變窄而減小，但只減小到某個點，超過該點（即 1.2vw 小於 1.2rem 的點）後，它不會再變小：它保持在 1.2rem。我們使用 max() 來設定最小字型大小：字型可以大於 1.2rem，但絕不會小於它。這很有用，因為非常小的文字很難閱讀。為實現這一點，我們使用 max(1.2rem, 1.2vw)。這意味著 font-size 將被設定為 1.2rem，除非 1.2vw 的計算值大於 1.2rem，在這種情況下，它將被設定為 1.2vw。
標題文字的大小（由 <h1> 元素的 font-size 控制）有一個相對於視口的值，同時具有最大和最小閾值。為實現這一點，我們使用 clamp(1.8rem, 2.5vw, 2.8rem)。相對於視口的值是 2.5vw，但它被限制在 1.8rem 和 2.8rem 之間，所以：
- 如果
2.5vw的計算值小於1.8rem，則將使用1.8rem - 如果
2.5vw的計算值大於2.8rem，則將使用2.8rem。
這可以防止標題文字在非常窄的視窗中變得太小，或在非常寬的視窗中變得太大。
HTML
<h1>Basic responsive test</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci,
eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat
eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula.
Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis,
libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis
lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id
risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac
imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit.
Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec
vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum.
Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget
nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.
</p>
<p>
Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu
facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra
quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis
quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem.
</p>
CSS
html {
font-family: sans-serif;
}
body {
margin: 0 auto;
width: min(1000px, calc(70% + 100px));
}
h1 {
letter-spacing: 2px;
font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}
p {
line-height: 1.5;
font-size: max(1.2rem, 1.2vw);
}
規範
| 規範 |
|---|
| CSS 值和單位模組第 4 級 # funcdef-clamp |
瀏覽器相容性
載入中…