Mobile-first design đề cập đến việc xây dựng website cho mobile trước, sau đó dùng CSS media queries kiểm soát website trông như thế nào trên màn hình lớn hơn, từ tablet đến desktop. Nói cách khác, bạn dùng media queries làm website responsive (thích ứng với các screen sizes khác nhau).
Khi dùng media queries, chúng ta gọi chúng là breakpoints. Vì vậy nếu bạn quyết định layout website chuyển từ mobile layout sang tablet layout ở screen width 800px, bạn tạo media query như sau:
@media screen and (min-width: 800px) { /* Add Tablet styles here */ }Và bây giờ 800px là breakpoint đầu tiên của bạn.
Giả sử chúng ta quyết định desktop breakpoint là 1200px, như sau:
@media screen and (min-width: 1200px) { /* Add Desktop styles here */ }Đó là breakpoint thứ 2, giờ bạn có tổng 2 breakpoints.
Demo nhanh layout dùng breakpoint model trên:
https://codepen.io/StrengthandFreedom/pen/abzywPd
Như bạn thấy, giờ có ba screen size ranges: mobile: 0-800px, tablet: 800-1200px, desktop: 1200-and-up, yêu cầu tạo 2 breakpoints với CSS Media Queries.
Ví dụ trên đơn giản, nhưng nên hiểu được ý. Bạn có thể adjust mọi thứ giữa breakpoints, từ font sizes đến layout width.
Điều gì nếu cần hơn hai breakpoints?
Một số situation cần approach tinh vi hơn, vượt qua dùng vài breakpoints. Tôi thấy website dùng tới 10 breakpoints, mỗi breakpoint 100-200px.
Đó có thể overdoing, cho hầu hết use cases.
Số breakpoints lý tưởng cho website là bao nhiêu?
Không có. Hãy để context dẫn dắt quyết định. Website càng phức tạp, thường cần nhiều breakpoints hơn để presentable trên tất cả devices/screen sizes quan trọng mà target audience dùng.
Về rule of thumb, website trung bình cần 2 đến 4 breakpoints cover most bases, theo kinh nghiệm tôi. Tôi thường dùng 4.
Bạn đã thấy ví dụ 2 breakpoints, giờ xem ví dụ khác dùng 4.
Responsive layout với 4 breakpoints
Lấy article layout giống trên, thêm vài breakpoints extra cho control nhiều hơn. Tôi nghĩ jump từ 0 đến 800px trên mobile hơi lớn. Bạn sẽ nhận ra đặc biệt landscape mode trên handheld devices, không luôn work tốt.
Lý do: mặc dù font sizes dùng work tốt trên handheld devices lớn, h1 (headline) hơi overpowering. Cùng lúc, content width hơi rộng khi vượt 500px width point, làm measure (line-length) quá dài, không reader-friendly, quá nhiều ký tự per line. Lý tưởng cho đọc tối ưu, line-length khoảng 40-80 ký tự per line.
Để fix, thêm breakpoint đầu tiên ở 480px, và thay vì 1200px làm desktop-and-up breakpoint, thêm cái nữa ở 1900px (cho màn hình rất lớn).
Xem demo 4 breakpoints:
https://codepen.io/StrengthandFreedom/pen/mdyMMeL
Nếu resize browser window, bạn thấy so với 2-breakpoint example, typography scale up down (adapt) gracefully hơn với 4-breakpoint layout. Đó là vì breakpoint thêm giữa mobile và tablet cho phép control chính xác hơn content-width, spacing (padding/margins) và font sizes.
Breakpoint 1900px hữu ích nếu design cho màn hình rất lớn, external monitors — ngày càng nhiều người dùng, không nên bỏ qua.
Có thể chỉ dùng một breakpoint cho website?
Tôi thích giữ đơn giản. Ít moving parts trong system, dễ maintain hơn. Tuy nhiên, có limit đến mức nào bạn simplify layout.
Một số designers/developers chỉ dùng một breakpoint cho toàn website. Một breakpoint nghĩa là họ dùng:
- Mobile layout
- Desktop layout
Breakpoint đó thường định nghĩa quanh 600-960px screen width range.
Bây giờ đó hơi optimistic cho modern times, nơi cần design cho myriad screen sizes và device types khác nhau.
Nếu bạn quan tâm cho broad range users (khác devices/screen sizes) trải nghiệm tốt, thường cần hơn một breakpoint.
Lặp lại điều tôi nói trước: hãy để context dẫn dắt design decisions.