Khi làm CSS mà cũng phải đau đầu vì toán Đại số (2)

Trong bài viết lần trước mình đã giới thiệu sơ qua một số phương pháp reponsive website rất hiệu quả sử dụng các công cụ CSS mới và một số công thức toán học quen thuộc mà khum cần dùng đến @media

Bạn có thể đọc lại ở đây: https://viblo.asia/p/khi-lam-css-ma-cung-phai-dau-dau-vi-toan-dai-so-Qbq5QEM45D8

Bài viết lần này mình sẽ nói thêm về một số các reponsive triệt để website của bạn bằng các sử dụng các công cụ CSS và đương nhiên là các công thức tính toán chiều rộng chiều cao nhưng ở mức nâng cao hơn một chút.

Thu nhỏ chiều rộng item phù hợp với mọi màn hình

Việc sử dụng CSS Grid có thể giúp bạn chia độ rộng của các item khá là thuận tiện, tuy nhiên nó lại gặp một vấn đề đó là khi độ rộng màn hình nhỏ hơn độ rộng của item sẽ xảy ra hiện tượng bị overflow theo chiều ngang. Với flexbox bạn có thể dễ dàng sử dụng thuộc tính flex-shrink để xử lý, còn với Grid thì điều này sẽ phức tạp hơn chút.

Tùy với cách code mà mỗi người sẽ có những cách xử lý khác nhau, riêng mình sẽ sử dụng một vài thuộc tính sau:

• Sửa công thức tính toán độ rộng với mỗi item ở bài trước: max(width, 100%/N - (N - 1) * gap)
• Thay đổi thành: clamp(100%/(N + 1) + 0.1%, width, 100%) (width = 400px)
  • Với màn hình cỡ lớn, công thức trên sẽ cho ra số lượng tối đa các item có thể hiển thị trên màn hình với độ rộng max của mỗi item = 400px
  • Với màn hình cỡ nhỏ, công thức trên sẽ giảm số lượng item hiển thị và điều chỉnh lại độ rộng của mỗi item tránh xảy ra overflow

.container { --w:400px; --n:3; display:grid; grid-template-columns:repeat(auto-fit,minmax(clamp(100%/(var(--n) + 1) + 0.1%,var(--w),100%),1fr)); gap:10px;
}
.container > div { height:100px; background:red;
}

Xem kết quả trên codepen:

Kiểm soát khi nào item được phép xuống dòng

Ở các ví dụ trước có thể thấy việc reponsive của chúng ta đã rất mượt mà ngọt nước rồi, tuy nhiên có lẽ nhiều người không để ý đến việc khi nào thì các item được phép xuống dòng, ví dụ như với màn hình 1280 mình có 3 item trên một hàng, mặc định xuống màn hình 480px số lượng item sẽ tự sắp xếp xuống còn 2 chẳng hạn, tuy nhiên ở màn hình này nếu mình vẫn muốn có 3 item một hàng, xuống màn hình cỡ nhỏ hơn sẽ tự động sắp xếp còn 1 item một hàng thì sao.

Chúng ta sẽ lại có một công thức khác với yêu cầu này:

• Thay đổi giá trị chiều rộng item (trong ví dụ trên là 400px) bằng (400px - 100vw)*1000
  • Giá trị 100vw là độ rộng tối đa của màn hình hiện tại và được tự động thay đổi khi màn hình thay đổi
• Công thức hoàn chỉnh: clamp(100%/(N + 1) + 0.1%, (400px - 100vw)*1000, 100%)
  • Khi chiều rộng màn hình > 400px chúng ta có hiệu số (400px - 100vw) là số âm, khi đó function clamp sẽ ưu tiên lấy giá trị 100%/(N + 1) + 0.1% tương ứng với N item trên một hàng
  • Ngược lại khi chiều rộng màn hình < 400px, function clamp sẽ ưu tiên nhận con số (400px - 100vw)*1000 tương ứng với một item mỗi hàng

Và kết quả như bên dưới:

Bonus

Thêm một trick nho nhỏ thế này, bạn thấy trong ví dụ trên là mình đưa từ N item về 1 item mỗi hàng, vậy còn đưa từ N item về M item mỗi hàng thì sao?

Khỏi để bạn phải suy đoán nhiều, công thức ở trên mình sẽ sửa đổi lại một chút như sau:

clamp(100%/(N + 1) + 0.1%, (400px - 100vw)*1000, 100%/(M + 1) + 0.1%)

Với M ở đây là số lượng item tối đa trên một hàng khi màn hình ở kích cỡ nhỏ.

Kết quả:

Lời kết

Đó là một số cách mình áp dụng toán học vào việc tính toán để Responsive sao cho thật hiệu quả. Các công thức ở trên các bạn có thể tự mày mò chế biến lại nó để tùy biến trang web của bạn được như ý muốn.

Cuối cùng, cám ơn các bạn đã dành chút thời gian đọc bài viết này!