Hướng Dẫn Sử Dụng clamp(rem) trong CSS

admin03/05/2025 184
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:

  1. Chọn root font size: 62.5% (1rem = 10px) hoặc 100% (1rem = 16px)
  2. Nhập kích thước màn hình nhỏ nhất và lớn nhất
  3. Nhập giá trị rem tối thiểu và tối đa
  4. 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!

Hỏi đáp

Bài viết mới nhất
admin20/05/2025 26
admin15/05/2025 34
admin13/05/2025 36
admin03/05/2025 184
admin03/05/2025 53
admin12/02/2025 394
admin11/02/2025 218
admin04/02/2025 235
Chia sẻ mới nhất
admin15/05/2025 34
admin13/05/2025 36
admin03/05/2025 184
admin03/05/2025 53
admin12/02/2025 394
admin11/02/2025 218
admin09/12/2024 351
_load_textdomain_just_in_time
admin21/11/2024 675
admin21/11/2024 487
admin20/11/2024 618