Responsive - breakpoint là gì?
Breakpoint, là những điểm (chiều rộng màn hình của thiết bị) mà ở đó giao diện được chuyển đổi cho phù hợp với thiết bị hiện tại, ví dụ như màn hình rộng hơn 1024px, thì có background-color màu đỏ, nhỏ hơn 1024px thì background-color màu xanh, khi này ta gọi 1024 là breakpoint.
Tùy vào chiều rộng hiển thị của thiết bị mà breakpoint sẽ khác nhau, hiện nay có rất nhiều thiết bị, tương ứng sẽ có nhiều chiều rộng khác nhau, nên sẽ có nhiều breakpoint khác nhau, do đó ta không thể thiết lập beakpoint cho từng loại thiết bị được.
Điểm breakpoint thường gặp
Nếu không có yêu cầu cụ thể, ngoài việc điều khiển chiều rộng cho linh hoạt, ta có thể tham khảo một số breakpoint phổ biến sau:
| Điểm breakpoint | Mô tả |
|---|---|
| 320 px | Màn hình chiều dọc cho smartphone nhỏ (VD iPhone 5) |
| 480 px | Màn hình chiều ngang cho smartphone nhỏ |
| 640 px | Màn hình chiều ngang cho smartphone vừa |
| 768 px | Màn hình chiều dọc cho tablet (VD: iPad) |
| 1024 px | Màn hình chiều ngang cho tablet (VD: iPad), hoặc chiều dọc cho tablet lớn (VD iPad Pro) |
Với vô số breakpoint như vậy, thì làm sao ta có thể hiển thị chính xác từng loại màn hình được? thật ra giải pháp rất đơn giản, ta sử dụng chiều rộng cố định (pixel - px) cho PC và sử dụng phần trăm (percent - %) cho các thiết bị Tablet và SP.
Điểm chú ý nữa là, chúng ta sẽ bắt breakpoint ở những vị trí mà giao diện thay đổi, khi này ta cần điều chỉnh giao diện cho phù hợp với chiều rộng màn hình mới.
Để viết các xử lý breakpoint, chúng ta sẽ sử dụng truy vấn @media trong CSS.