5.1 Hàm calc()
Chức năng CSS cung cấp các công cụ hiệu quả để thực hiện các hoạt động khác nhau ngay trong các file stylesheet.
Các hàm calc(), min(), max() và clamp() đặc biệt hữu ích cho việc tạo ra thiết kế linh hoạt và responsive, vì chúng cho phép
thực hiện các phép toán và tính toán điều kiện giá trị.
Hàm calc() được sử dụng để thực hiện các phép toán trong CSS. Nó cho phép kết hợp các đơn vị đo khác nhau,
chẳng hạn như pixel (px), phần trăm (%), em, rem và những cái khác, trong một biểu thức.
Cú pháp:
selector {
property: calc(expression);
}
Ví dụ sử dụng
Trong ví dụ này, chiều rộng của khối được tính là 50% chiều rộng của phần tử cha trừ đi 20 pixel:
/* Chiều rộng khối - một nửa phần tử cha trừ đi 20px */
.block {
width: calc(50% - 20px);
}
5.2 Các hàm min(), max() và clamp()
Các hàm min(), max() và clamp() trong CSS
Hàm min()
Hàm min() nhận nhiều giá trị và trả về giá trị nhỏ nhất trong số đó. Hữu ích để tạo ra
kích thước linh hoạt thay đổi dựa trên ngữ cảnh.
Cú pháp:
selector {
property: min(value1, value2);
}
Ví dụ
Trong ví dụ này, chiều rộng container sẽ là 50% hoặc 300 pixel, tùy thuộc vào cái nào nhỏ hơn:
.container {
width: min(50%, 300px);
}
Hàm max()
Hàm max() nhận nhiều giá trị và trả về giá trị lớn nhất trong số đó. Hữu ích để đặt
kích thước tối thiểu và bảo đảm tính responsive.
Hàm clamp()
Hàm clamp() nhận ba giá trị: tối thiểu, ưu tiên và tối đa. Giới hạn
giá trị giữa tối thiểu và tối đa, hướng tới giá trị ưu tiên.
5.3 Lợi ích của việc sử dụng chức năng CSS
Lợi ích của việc sử dụng chức năng CSS:
- Tính linh hoạt. Chức năng CSS cho phép tạo ra các styles linh hoạt và responsive hơn, vì chúng cho phép tính toán giá trị một cách động.
- Đơn giản hóa thiết kế responsive. Các hàm
min(),max()vàclamp()đơn giản hóa đáng kể việc tạo ra các thiết kế responsive, cho phép giới hạn giá trị trong các ngưỡng nhất định. - Giảm bớt sự cần thiết của media queries. Sử dụng những hàm này có thể giảm số lượng media queries cần thiết để điều chỉnh styles cho các kích thước màn hình khác nhau.
5.4 Ví dụ triển khai đầy đủ
.container {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
}
.block {
background-color: #3498db;
color: white;
padding: 10px;
text-align: center;
}
.block:nth-child(1) {
width: calc(50% - 20px);
}
.block:nth-child(2) {
width: min(300px, 100%);
}
.block:nth-child(3) {
width: max(200px, 50%);
}
.text {
font-size: clamp(12px, 2vw, 24px);
}
<!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 chức năng CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="block">Khối có chiều rộng calc(50% - 20px)</div>
<div class="block">Khối có chiều rộng min(300px, 100%)</div>
<div class="block">Khối có chiều rộng max(200px, 50%)</div>
<p class="text">Văn bản có kích thước font clamp(12px, 2vw, 24px)</p>
</div>
</body>
</html>
GO TO FULL VERSION