7.1 min() funksiyası
min() funksiyası arqumentlər siyahısından ən kiçik dəyəri qaytarır. Bu, müəyyən bir limitdən artıq olmayan dəyərləri təyin etmək üçün faydalıdır.
Syntax:
seçici {
xüsusiyyət: min(value1, value2 ...);
}
İstifadə nümunəsi:
Bu nümunədə blokun eni 300 pikseli keçməyəcək, amma əgər valideyn elementin 100%-i 300 pikseldən azdırsa, 100%-lik dəyər istifadə olunacaq:
/* Blokun eni 300px-dən böyük deyil, amma 100px-dən kiçik də deyil */
.block {
width: min(300px, 100%);
}
Nümunə 2: Şrift ölçüsünü məhdudlaşdırmaq
Bu nümunədə şriftin ölçüsü 2em-dən böyük olmayacaq, amma əgər baxış pəncərəsinin eninin 5%-i daha kiçikdirsə, bu dəyər istifadə olunacaq:
.text {
font-size: min(2em, 5vw);
}
7.2 max() funksiyası
max() funksiyası argumentlər siyahısındakı ən böyük dəyəri qaytarır. Bu, dəyərlərin müəyyən bir limitdən aşağı düşməməsi üçün faydalıdır.
Sintaksis:
selektor {
xüsusiyyət: max(dəyər1, dəyər2, ...);
}
İstifadə nümunəsi
Bu nümunədə blokun eni 200 pikseldən az olmayacaq, amma əgər valideyn elementin eninin 50%-i 200 pikseldən çoxdursa, 50% dəyəri istifadə olunacaq:
/* Blokun eni 200px-dən az deyil, amma çox ola bilər */
.block {
width: max(200px, 50%);
}
Nümunə 2: Minimum şrift ölçüsü
Bu nümunədə şrift ölçüsü 1.5em-dən az olmayacaq, amma əgər baxış pəncərəsinin eninin 2%-i daha çoxdursa, bu dəyər istifadə olunacaq:
.title {
font-size: max(1.5em, 2vw);
}
7.3 clamp() funksiyası
clamp() funksiyası minimum və maksimum dəyərlər arasında məhdudlaşdırılmış bir dəyər qaytarır. Bu funksiya üç arqument qəbul edir: minimum dəyər, üstünlük verilən dəyər və maksimum dəyər.
Syntax:
selektor {
xassə: clamp(min, ifadə, max);
}
İstifadə nümunəsi
Bu nümunədə şrift ölçüsü görüntüləmə pəncərəsinin eninə görə dəyişəcək: minimum 12 piksel, maksimum 24 piksel, üstünlük verilən dəyər isə pəncərə eninin 2%-i olacaq:
/* Şrift ölçüsü ekran eninə görə 12px ilə 24px arasında dəyişəcək */
.text {
font-size: clamp(12px, 2vw, 24px);
}
Nümunə 2: Blokun enini məhdudlaşdırma
Bu nümunədə blokun eni valideyn elementin eninə görə dəyişəcək, lakin 200 piksel-dən az və 600 piksel-dən çox olmayacaq:
.box {
width: clamp(200px, 50%, 600px);
}
7.4 Tam realizasiya nümunəsi
.container {
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px;
}
.box {
background-color: #3498db;
color: white;
padding: 10px;
text-align: center;
width: clamp(200px, 50%, 600px);
}
.text {
font-size: clamp(1em, 2vw, 2em);
}
.sidebar {
background-color: #2ecc71;
color: white;
padding: 10px;
text-align: center;
width: max(200px, 30%);
}
.text-small {
font-size: min(2em, 5vw);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>min(), max() və clamp() funksiyalarının istifadəsi nümunəsi</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box">En: clamp(200px, 50%, 600px)</div>
<p class="text">Şrift ölçüsü: clamp(1em, 2vw, 2em)</p>
<div class="sidebar">En: max(200px, 30%)</div>
<p class="text-small">Şrift ölçüsü: min(2em, 5vw)</p>
</div>
</body>
</html>
GO TO FULL VERSION