Khóa học khuyến nghị:

Hàm CSS clamp()

Định nghĩa và cách sử dụng của CSS clamp() Hàm được sử dụng để đặt một giá trị, giá trị này sẽ tự động điều chỉnh giữa giá trị nhỏ nhất và giá trị lớn nhất dựa trên kích thước của khung nhìn.

clamp() Hàm có ba tham số: giá trị nhỏ nhất, giá trị ưa thích và giá trị lớn nhất. Nếu giá trị ưa thích trong phạm vi được chỉ định, trình duyệt sẽ chọn giá trị ưa thích; ngược lại, trình duyệt sẽ chọn giá trị nhỏ nhất hoặc giá trị lớn nhất.

Mô hình

Đặt kích thước chữ nhỏ nhất của thẻ <h1> là 2rem và kích thước chữ lớn nhất là 3.5rem. Đồng thời, đặt kích thước chữ nhỏ nhất của thẻ <p> là 1rem và kích thước chữ lớn nhất là 2.5rem:

h1 {
  font-size: clamp(2rem, 2.5vw, 3.5rem);
}
p {
  font-size: clamp(1rem, 2.5vw, 2.5rem);
}

Thử ngay

Ngữ pháp CSS

clamp(min, preferred, max)
Giá trị Mô tả
min Tùy chọn. Định nghĩa giá trị nhỏ nhất được phép.
preferred Bắt buộc. Định nghĩa giá trị ưa thích.
max Tùy chọn. Định nghĩa giá trị lớn nhất được phép.

Chi tiết kỹ thuật

Phiên bản: Module CSS Values and Units Level 4

Hỗ trợ trình duyệt

Số liệu trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ hàm này.

Chrome Edge Firefox Safari Opera
79 79 75 13.1 66