Funcții matematice CSS
Datorită funcțiilor matematice, valorile proprietăților din CSS pot fi expresii matematice.
Acest capitol analizează patru dintre ele:
calc()max()min()clamp()
Funcția CSS calc()
Folosește calc() când valoarea unei proprietăți trebuie să fie rezultatul unui calcul.
Operatorii acceptați sunt adunarea (+), scăderea (-), înmulțirea (*) și împărțirea (/), iar unitățile pot fi combinate, de exemplu pixeli cu procente.
Exemplu
Atât lățimea, cât și înălțimea acestui element <div> provin din calc().
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS calc() Function</title>
<style>
#div1 {
margin: auto;
width: calc(100% - 100px);
height: calc(30vh + 50px);
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<h1>The calc() Function</h1>
<p>Use calc() to calculate the width and height of a div element:</p>
<div id="div1">This div has a width of calc(100% - 100px) and a height of calc(30vh + 50px).</div>
</body>
</html>
Sintaxă CSS
calc(expression)
Funcția CSS max()
Dintr-o listă de valori separate prin virgulă, max() alege cea mai mare valoare și o folosește pentru proprietate.
Exemplu
Dintre 50% și 300px, max() îi dă lui #div1 ca lățime valoarea mai mare.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS max() Function</title>
<style>
#div1 {
height: 100px;
width: max(50%, 300px);
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<h1>The max() Function</h1>
<p>Use max() to set the width of the div to whichever value is largest, 50% or 300px:</p>
<div id="div1">This div has a width of max(50%, 300px). Resize the browser window to see the effect.</div>
</body>
</html>
Sintaxă CSS
max(value1, value2, ...)
Funcția CSS min()
Dintr-o listă de valori separate prin virgulă, min() alege cea mai mică valoare și o folosește pentru proprietate.
Exemplu
Dintre 50% și 300px, min() îi dă lui #div1 ca lățime valoarea mai mică.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS min() Function</title>
<style>
#div1 {
height: 100px;
width: min(50%, 300px);
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<h1>The min() Function</h1>
<p>Use min() to set the width of the div to whichever value is smallest, 50% or 300px:</p>
<div id="div1">This div has a width of min(50%, 300px). Resize the browser window to see the effect.</div>
</body>
</html>
Sintaxă CSS
min(value1, value2, ...)
Funcția CSS clamp()
O valoare care reacționează la dimensiunea ferestrei de vizualizare, dar rămâne în anumite limite, vine de la clamp(): ea variază între un minim, o valoare preferată și un maxim.
Acestea trei sunt și parametrii funcției și se rezolvă astfel:
- O valoare preferată aflată între minim și maxim se folosește ca atare.
- O valoare preferată sub minim cedează locul valorii minime.
- O valoare preferată peste maxim cedează locul valorii maxime.
Exemplu
Font-size-ul elementului <h2> este 5vw, limitat la cel puțin 1.5rem și cel mult 3rem. Elementul <div> se bazează și el pe clamp(), atât pentru font-size, cât și pentru lățime.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS clamp() Function</title>
<style>
h2 {
font-size: clamp(1.5rem, 5vw, 3rem);
}
div {
border: 1px solid green;
padding: 10px;
font-size: clamp(1rem, 2.5vw, 2rem);
width: clamp(200px, 50%, 600px);
}
</style>
</head>
<body>
<h1>The clamp() Function</h1>
<h2>This Heading Uses clamp()</h2>
<p>The h2 font-size is set to clamp(1.5rem, 5vw, 3rem). It will never be smaller than 1.5rem or larger than 3rem.</p>
<div>This div uses clamp() for both font-size and width. The font-size is clamp(1rem, 2.5vw, 2rem) and the width is clamp(200px, 50%, 600px). Resize the browser window to see the effect.</div>
</body>
</html>
Sintaxă CSS
clamp(min, preferred, max)