7.1 Hàm min()
Hàm min() trả về giá trị nhỏ nhất từ danh sách các tham số. Nó hữu ích để thiết lập các giá trị không vượt quá một giới hạn nhất định.
Cú pháp:
selector {
thuộc tính: min(value1, value2 ...);
}
Ví dụ sử dụng:
Trong ví dụ này, chiều rộng của khối sẽ không lớn hơn 300 pixel, nhưng nếu 100% của phần tử cha nhỏ hơn 300 pixel, giá trị 100% sẽ được sử dụng:
/* Chiều rộng của khối không lớn hơn 300px, nhưng không nhỏ hơn 100px */
.block {
width: min(300px, 100%);
}
Ví dụ 2: Giới hạn kích thước phông chữ
Trong ví dụ này, kích thước phông chữ sẽ không lớn hơn 2em, nhưng nếu 5% của chiều rộng cửa sổ xem nhỏ hơn, giá trị đó sẽ được sử dụng:
.text {
font-size: min(2em, 5vw);
}
7.2 Hàm max()
Hàm max() trả về giá trị lớn nhất từ danh sách các tham số. Nó hữu ích để thiết lập các giá trị không hạ xuống dưới một giới hạn nhất định.
Cú pháp:
selector {
thuộc tính: max(value1, value2, ...);
}
Ví dụ sử dụng
Trong ví dụ này, chiều rộng của khối sẽ không nhỏ hơn 200 pixel, nhưng nếu 50% của chiều rộng phần tử cha lớn hơn 200 pixel, giá trị 50% sẽ được sử dụng:
/* Chiều rộng của khối không nhỏ hơn 200px, nhưng có thể lớn hơn */
.block {
width: max(200px, 50%);
}
Ví dụ 2: Kích thước phông chữ tối thiểu
Trong ví dụ này, kích thước phông chữ sẽ không nhỏ hơn 1.5em, nhưng nếu 2% của chiều rộng cửa sổ xem lớn hơn, giá trị đó sẽ được sử dụng:
.title {
font-size: max(1.5em, 2vw);
}
7.3 Hàm clamp()
Hàm clamp() trả về giá trị bị giới hạn bởi giá trị tối thiểu và tối đa. Nó nhận ba tham số: giá trị tối thiểu, giá trị ưa thích, và giá trị tối đa.
Cú pháp:
selector {
thuộc tính: clamp(min, biểu thức, max);
}
Ví dụ sử dụng
Trong ví dụ này, kích thước phông chữ sẽ thay đổi theo chiều rộng của cửa sổ xem: nhỏ nhất là 12 pixel, lớn nhất là 24 pixel, và giá trị ưa thích là 2% của chiều rộng cửa sổ:
/* Kích thước phông từ 12px đến 24px, tùy thuộc vào chiều rộng màn hình */
.text {
font-size: clamp(12px, 2vw, 24px);
}
Ví dụ 2: Giới hạn chiều rộng của khối
Trong ví dụ này, chiều rộng của khối sẽ thay đổi theo chiều rộng của phần tử cha, nhưng không nhỏ hơn 200 pixel và không lớn hơn 600 pixel:
.box {
width: clamp(200px, 50%, 600px);
}
7.4 Ví dụ về thực hiện đầy đủ
.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>Ví dụ sử dụng các hàm min(), max() và clamp()</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box">Chiều rộng: clamp(200px, 50%, 600px)</div>
<p class="text">Kích thước phông: clamp(1em, 2vw, 2em)</p>
<div class="sidebar">Chiều rộng: max(200px, 30%)</div>
<p class="text-small">Kích thước phông: min(2em, 5vw)</p>
</div>
</body>
</html>
GO TO FULL VERSION