Hướng Dẫn Sử Dụng clamp(rem) trong CSS
1 ngày trước 110
CSS Clamp Result:
clamp(0rem, 0rem + 0vw, 0rem)
Hướng Dẫn Sử Dụng clamp(rem) Trong CSS Để Thiết Kế Giao Diện Responsive
clamp() là gì?
Hàm clamp() trong CSS giúp bạn tạo ra các giá trị co giãn linh hoạt nhưng vẫn kiểm soát được giới hạn tối thiểu và tối đa. Cú pháp:
font-size: clamp(MIN, PREFERRED, MAX);
- MIN: giá trị nhỏ nhất (thường là rem hoặc px)
- PREFERRED: giá trị co giãn theo vw hoặc công thức
- MAX: giá trị lớn nhất
Vì sao nên dùng rem?
- Dễ dàng tùy chỉnh theo người dùng
- Thân thiện với accessibility
- Dễ quản lý và mở rộng
Cách tính clamp() sử dụng rem
Ví dụ: Bạn muốn font-size co giãn từ 1rem đến 2rem trong khoảng màn hình từ 320px đến 1366px.
Công thức:
vw_coef = (max_rem – min_rem) / (max_px – min_px) * 100
font-size: clamp(min_rem, calc(C + vw_coef * 1vw), max_rem);
Ví dụ cụ thể:
font-size: clamp(1rem, 0.7231rem + 0.0976vw, 2rem);
Công cụ hỗ trợ clamp(rem)
Cách sử dụng:
- Chọn root font size: 62.5% (1rem = 10px) hoặc 100% (1rem = 16px)
- Nhập kích thước màn hình nhỏ nhất và lớn nhất
- Nhập giá trị rem tối thiểu và tối đa
- Kết quả sẽ được tạo tự động
Ứng dụng thực tế
h1 {
font-size: clamp(1.6rem, 1.2rem + 1vw, 2.4rem);
}
.container {
padding: clamp(1rem, 0.5rem + 2vw, 3rem);
}
Ưu điểm khi kết hợp clamp() + rem
- Không cần media query
- Responsive mượt mà
- Dễ tinh chỉnh
- Hỗ trợ tốt trên các trình duyệt hiện đại
Sử dụng clamp() với đơn vị rem là giải pháp hiện đại để thiết kế giao diện web đẹp và linh hoạt. Hãy dùng kèm shortcode công cụ để tự động tính toán nhanh chóng và chính xác!
