CSS math functions (calc, min, max, clamp) khác nhau?

Bốn hàm toán, dùng được ở mọi chỗ nhận độ dài, số, góc hay tần số.

.a { width: calc(100% - 2rem); }              /* tính toán, trộn đơn vị được */
.b { width: min(90%, 1200px); }                /* lấy giá trị NHỎ hơn */
.c { padding: max(1rem, env(safe-area-inset-left)); }  /* lấy giá trị LỚN hơn */
.d { font-size: clamp(1rem, 2.5vw, 2rem); }    /* khoá trong khoảng */

Mẹo hay dùng — min() thay max-width, max() thay min-width:

.container { width: min(90%, 1180px); }
/* tương đương: width: 90%; max-width: 1180px; — nhưng chỉ một dòng và lồng được */

Cả bốn lồng nhau và cộng trừ với nhau được:

width: clamp(320px, calc(100% - 2rem), min(1180px, 90vw));

Lưu ý 1 — khoảng trắng quanh toán tử. calc(100%-2rem) không hợp lệ; phải có khoảng trắng hai bên + và - (với * và / thì không bắt buộc). Đây là lỗi cú pháp CSS bị bỏ qua âm thầm, không báo gì.

Lưu ý 2: chia cho biến bằng 0 hoặc trộn đơn vị vô nghĩa làm cả khai báo bị bỏ, element rơi về giá trị kế thừa, biểu hiện ra ngoài giống như CSS không được áp dụng.

Ghi chú: clamp(a, b, c) chính là max(a, min(b, c)) — biết điều này giúp suy ra hành vi khi min lớn hơn max: kết quả trả về min.