Cách responsive text hiệu quả với hàm clamp cực hay ho

Bài viết được sự cho phép của tác giả Trần Anh Tuấn

Trong quá trình các bạn code giao diện thì chắc chắn cỡ nào cũng phải làm việc với chữ. Và làm sao để làm responsive cho chữ thì chắc đa số ai cũng sẽ biết làm với việc sử dụng Media Queries thông thường. Một màn hình cho máy tính, một màn hình cho điện thoại, tablet… để thay đổi giá trị của thuộc tính font-size.

Trong quá trình mình dạy học và chia sẻ thì có nhiều bạn hỏi là có cách nào để chữ có thể tự co giãn theo màn hình được hay không? Thì để trả lời cho các bạn đó, cũng như các bạn đang đọc bài này thì mình sẽ giới thiệu tới cho các bạn một hàm trong CSS có thể làm được việc này đó chính là clamp. Vậy clamp hoạt động như thế nào ? Sử dụng ra sao cho hiệu quả thì mình sẽ chỉ cho các bạn ngay sau đây.

min

Để hiểu được cách mà clamp hoạt động thì đầu tiên chúng ta phải hiểu được cách mà hàm min hoạt động trước đã.

.parent{
  width: 1400px;
}
.item {
  width: min(600px, 100%)
}

Ví dụ trong trường hợp này thì .parent có độ rộng là 1400px và .item có độ rộng dựa vào hàm min(value1, value2) thì 2 giá trị này, giá trị nào nhỏ hơn nó sẽ lấy thằng đó. Đối với đơn vị px thì nó cố định rồi nên rất là dễ hiểu, tuy nhiên đối với đơn vị phần trăm thì chúng ta phải biết 100% đó là phụ thuộc vào ai.

<div class="parent">
   <div class="item"></div>
</div>

Như cấu trúc HTML như thế này thì chắc hẳn các bạn cũng đoán được là 100% là của .parent rồi. Từ đó mình suy ra được 100% = 1400px. Lúc này code của chúng ta sẽ tường minh hơn như sau width: min(600px, 1400px). Do đó kết quả lúc này của .item sẽ là 600px. Các bạn đã hiểu rồi chứ ?

Lưu ý: Mình đang để .parent là 1400px là ví dụ. Đôi khi các bạn để linh động phụ thuộc vào độ rộng của màn hình, thì khi co giãn màn hình tới tầm 500px đi ha. Thì lúc này nó sẽ lấy là 500px chứ ko còn là 600px nữa vì min(600px, 500px)

max

Ngược lại với ở hàm min ở trên thì max nó sẽ lấy giá trị lớn hơn thôi. Giải thích cũng tương tự ở trên luôn. Lúc này nó sẽ lấy 1400px vì 1400px > 600px. Khi co màn hình lại tầm 500px thì .item sẽ lấy 600px vì 600px > 500px cho nên cẩn thận xuất hiện scroll ngang làm bể giao diện các bạn nhé.

.parent{
  width: 100%; // base on screen width size
}
.item {
  width: max(600px, 100%)
}

Tham khảo việc làm CSS Hồ Chí Minh hấp dẫn trên TopDev

clamp

Sau khi các bạn được mình thông não chi thuật 2 hàm min và max ở trên rồi. Thì lúc này mình mới truyền dạy cho các bạn hiểu về hàm clamp cực đỉnh này được. Vậy thì nó hoạt động như nào ? Các bạn cùng xem cú pháp đã nhé

.item{
  width: clamp(100px, 200px, 300px);
  width: max(100px, min(200px, 300px));
}

Dòng code đầu tiên là khi mình dùng clamp(min, val, max), và dòng tiếp theo sau đó là cách mà nó hoạt động, nó được viết lại theo 2 hàm mà chúng ta đã tìm hiểu trước đó là min và max. Nhìn vào thì các bạn cũng đoán được nó sẽ lấy giá trị nào rồi chứ ? Nếu chưa thì để mình phân tích cho.

Đầu tiên nó chạy đoạn min(200px, 300px) trước, lúc này chúng ta sẽ được kết quả là 200px. Tiếp đến sẽ là max(100px, 200px) thì nó sẽ là 200px. Cuối cùng kết quả chúng ta có là 200px.

Hiểu được cách hoạt động rồi thì tiếp đến là áp dụng nó vào thuộc tính font-size của chữ như thế nào đây ? Và theo yêu cầu của nhiều người đó chính là co giãn theo màn hình nghĩa là logic sẽ chạy theo đơn vị vw(viewport width) mấu chốt ở đây.

Mình sẽ có giao diện với chữ .heading ở màn hình máy tính có font-size: 3rem và ở mobile là font-size: 1rem còn ở giữa mình muốn nó linh động co giãn từ 1rem cho tới 3rem.

.heading{
  font-size: clamp(1rem, Value, 3rem);
}

Value ở đây chính là cái quan trọng chúng ta cần tính toán làm sao để nó thuộc giữa 1rem và 3rem.

Một tool cực kỳ hay cho các bạn đó chính là https://modern-fluid-typography.vercel.app/ các bạn chỉ cần điền vào root font-size, giá trị min, giá trị max, fluid size và công cụ này sẽ tính ra được cho các bạn ví dụ như thế này clamp(1rem, 1.5vw + 1rem, 2rem)

Dù có công cụ làm giùm hay chúng ta tự làm đi chăng nữa thì các bạn cũng phải test lại cho chính xác như yêu cầu nhé. Các bạn có thể nhấn vào đây để xem demo code nha.

font-size: clamp(1rem, 0.7rem + 1.5vw, 2rem);

Hi vọng thông qua bài viết này sẽ giúp ích cho các bạn thêm kiến thức mới, có thể áp dụng vào dự án của các bạn, giúp tiết kiệm code hơn, code nhanh hơn và hiệu quả hơn nhé. Cám ơn các bạn và chúc các bạn một ngày tốt lành.

Bài viết gốc được đăng tải tại evondev.com

Có thể bạn quan tâm:

• CSS Clamp giải thích và ứng dụng
• Nên sử dụng đơn vị EM hay REM?
• CSS Preprocessor là gì? Cách sử dụng có khó không?