Kihagyás

10.5. fejezet

CSS Matematikai Függvények

A CSS matematikai függvények lehetőséget biztosítanak arra, hogy közvetlenül a CSS-ben végezzünk egyszerű számításokat. Ezek a függvények különösen hasznosak lehetnek, ha dinamikusan változó értékekkel dolgozunk a stílusok meghatározásakor. A leggyakrabban használt matematikai függvények a következők: calc(), min(), max() és clamp().

calc()

A calc() függvény lehetővé teszi, hogy matematikai műveleteket hajtsunk végre közvetlenül a CSS-ben. Ez különösen hasznos lehet a dinamikus méretezésnél, ahol különféle mértékegységeket kombinálunk, mint például százalékok, pixelek vagy em-ek.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Calc Függvény Példa</title>
    <style>
        .calc-example {
            width: calc(100% - 50px);
            height: 100px;
            background-color: lightblue;
            margin: 20px;
        }
    </style>
</head>
<body>
    <h2>Calc Függvény Példa</h2>
    <div class="calc-example">Ez a doboz a szülő elem szélességének 100%-a mínusz 50 pixel.</div>
</body>
</html>

min(), max()

A min(), illetve max() függvény lehetővé teszi, hogy két vagy több érték közül a legkisebbet, illetve a legnagyobbat válasszuk ki. Ez hasznos lehet olyan esetekben, amikor az elemek méretének kiszámításakor több tényezőt is figyelembe kell venni.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Min Függvény Példa</title>
    <style>
        .min-example {
            width: min(50%, 300px);
            height: 100px;
            background-color: lightgreen;
            margin: 20px;
        }
    </style>
</head>
<body>
    <h2>Min Függvény Példa</h2>
    <div class="min-example">A doboz szélessége legfeljebb 300 pixel vagy a szülő elem 50%-a.</div>
</body>
</html>

clamp()

A clamp() függvény lehetővé teszi, hogy egy értéket egy minimális és egy maximális érték között korlátozzunk. Ez hasznos különféle dinamikus méretezések esetén, hogy a kijelző méretétől függetlenül egy meghatározott belül maradjunk.

clamp(min, preferred, max): A doboz szélessége legalább 200 pixel, legfeljebb 500 pixel, és a szülő elem szélességének 50%-a között van.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Clamp Függvény Példa</title>
    <style>
        .clamp-example {
            width: clamp(200px, 50%, 500px);
            height: 100px;
            background-color: lightpink;
            margin: 20px;
        }
    </style>
</head>
<body>
    <h2>Clamp Függvény Példa</h2>
    <div class="clamp-example">A doboz szélessége legalább 200 pixel, de legfeljebb 500 pixel, és a szülő elem szélességének 50%-a között van.</div>
</body>
</html>

Gyakori példák

Reszponzív betűméret: A betűméretet dinamikusan szabályozhatjuk, hogy a különböző képernyőméreteken megfelelően jelenjen meg: 

1
2
3
.responsive-text {
    font-size: clamp(1rem, 2.5vw, 2rem);
}

Oldal margók: Az oldal margóinak dinamikus beállítása a kijelző méretéhez igazodva: 

1
2
3
body {
    margin: 0 clamp(10px, 5%, 50px);
}

Utolsó frissítés: 2024-07-22 15:35:59