Thiết kế ưu tiên thiết bị di động đề cập đến hành động xây dựng trang web cho điện thoại di động trước tiên, sau đó sử dụng truy vấn phương tiện CSS để kiểm soát cách trang web của bạn trông như thế nào trên các kích thước màn hình lớn hơn, từ máy tính bảng đến máy tính để bàn. Nói cách khác, bạn sử dụng các truy vấn phương tiện để làm cho trang web của bạn đáp ứng (thích ứng với các kích thước màn hình khác nhau).
Khi chúng tôi sử dụng các truy vấn phương tiện, chúng tôi gọi chúng là điểm ngắt. Vì vậy, nếu bạn quyết định rằng bố cục trang web của mình nên chuyển từ bố cục di động sang bố cục máy tính bảng ở chiều rộng màn hình 800px, thì bạn tạo một truy vấn phương tiện như sau:
@media screen and (min-width: 800px) {
/* Add Tablet styles here */
}Và bây giờ 800px là điểm ngắt đầu tiên của bạn.
Giả sử chúng tôi quyết định rằng điểm ngắt trên màn hình của chúng tôi phải là 1200px, như sau:
@media screen and (min-width: 1200px) {
/* Add Desktop styles here */
}Đó là điểm ngắt thứ hai của bạn, bây giờ bạn có tổng cộng hai điểm ngắt.
Dưới đây là bản trình diễn nhanh về bố cục sử dụng mô hình điểm ngắt được hiển thị ở trên:
https://codepen.io/StrengthandFreedom/pen/abzywPd
Như bạn có thể thấy, chúng tôi hiện có ba phạm vi kích thước màn hình khác nhau để hoạt động, di động:0-800px, máy tính bảng:800-1200px, máy tính để bàn:1200 trở lên, yêu cầu chúng tôi tạo tổng cộng hai điểm ngắt với CSS Media Truy vấn.
Ví dụ trên là một ví dụ đơn giản, nhưng nó sẽ đi sâu vào vấn đề. Bạn có thể điều chỉnh mọi thứ giữa các điểm ngắt, từ kích thước phông chữ đến chiều rộng bố cục.
Điều gì sẽ xảy ra nếu bạn cần nhiều hơn hai điểm ngắt?
Một số tình huống yêu cầu một cách tiếp cận chi tiết hơn, trong đó bạn đi ở trên bằng cách sử dụng một vài điểm ngắt. Tôi đã thấy một số trang web sử dụng tới 10, sử dụng một điểm ngắt cứ sau 100 đến 200px hoặc lâu hơn.
Đó có thể là việc làm quá mức, đối với hầu hết các trường hợp sử dụng.
Số điểm ngắt lý tưởng cho một trang web là bao nhiêu?
Chẳng có ai. Bạn nên để bối cảnh hướng dẫn các quyết định của bạn. Trang web của bạn càng phức tạp, thì càng cần nhiều điểm ngắt để làm cho trang web của bạn hiển thị trên tất cả các thiết bị / kích thước màn hình quan trọng mà đối tượng mục tiêu của bạn sử dụng.
Theo kinh nghiệm của tôi, một trang web trung bình cần từ 2 đến 4 điểm ngắt để bao gồm hầu hết các cơ sở. Tôi có xu hướng đi với 4.
Bạn đã thấy một ví dụ về việc sử dụng 2 điểm ngắt, bây giờ hãy xem một ví dụ khác mà chúng tôi đang sử dụng 4.
Bố cục đáp ứng với 4 điểm ngắt
Sử dụng cùng một bố cục bài viết từ phía trên, hãy thêm một vài điểm ngắt bổ sung để cung cấp cho chúng tôi nhiều quyền kiểm soát hơn. Tôi nghĩ rằng bước nhảy từ 0 lên 800px trên thiết bị di động là một chút quá lớn. Bạn sẽ nhận thấy rằng đặc biệt là ở chế độ ngang trên các thiết bị cầm tay, điều này không phải lúc nào cũng hoạt động tốt.
Lý do là mặc dù kích thước phông chữ chúng tôi sử dụng hoạt động tốt trong các thiết bị cầm tay lớn, nhưng h1 (dòng tiêu đề) hơi quá mạnh. Đồng thời, chiều rộng nội dung hơi quá rộng khi chúng ta vượt quá điểm chiều rộng 500px, điều này làm cho thước đo (độ dài dòng) của chúng ta quá dài và không thân thiện với người đọc, với quá nhiều ký tự trên mỗi dòng. Lý tưởng nhất, để đọc tối ưu, chúng tôi muốn độ dài dòng của mình vào khoảng 40 đến 80 ký tự trên mỗi dòng.
Để khắc phục sự cố này, hãy thêm điểm ngắt đầu tiên của chúng ta ở 480px, sau đó thay vì sử dụng 1200px làm điểm ngắt trên máy tính để bàn và trên màn hình, hãy thêm một điểm khác ở 1900px (đối với màn hình thực sự lớn).
Xem bản demo 4 điểm ngắt tại đây:
https://codepen.io/StrengthandFreedom/pen/mdyMMeL
Nếu bạn thay đổi kích thước cửa sổ trình duyệt, bạn sẽ thấy rằng so với ví dụ 2 điểm ngắt, kiểu chữ của chúng tôi điều chỉnh lên và xuống (điều chỉnh) duyên dáng hơn với bố cục 4 điểm ngắt. Đó là bởi vì điểm ngắt bổ sung giữa thiết bị di động và máy tính bảng đã cho phép chúng tôi kiểm soát chính xác hơn chiều rộng nội dung, khoảng cách (đệm / lề) và kích thước phông chữ.
Điểm ngắt 1900px sẽ hữu ích nếu bạn thiết kế cho màn hình thực sự lớn, chẳng hạn như màn hình bên ngoài - thứ mà ngày càng nhiều người sử dụng hiện nay và do đó chúng không nên bị bỏ qua.
Bạn có thể thoát khỏi việc chỉ sử dụng một điểm ngắt trên trang web không ?
Tôi muốn giữ cho mọi thứ đơn giản. Hệ thống càng ít bộ phận chuyển động thì càng dễ bảo trì. Tuy nhiên, có một giới hạn về mức độ đơn giản mà bạn có thể tạo bố cục của mình.
Một số nhà thiết kế và nhà phát triển chỉ sử dụng một điểm ngắt cho toàn bộ trang web của họ. Một điểm ngắt có nghĩa là họ sử dụng:
- Bố cục Di động
- Bố cục trên màn hình
Khi đó, một điểm ngắt thường sẽ được xác định trong phạm vi chiều rộng màn hình 600-960px.
Bây giờ đó là lạc quan một chút cho thời hiện đại, nơi chúng ta cần thiết kế cho vô số loại thiết bị và kích thước màn hình khác nhau.
Nếu bạn quan tâm đến việc mang lại cho nhiều người dùng (với các thiết bị / kích thước màn hình khác nhau) trải nghiệm người dùng tốt, thì bạn thường cần nhiều hơn một điểm ngắt.
Để lặp lại những gì tôi đã nói trước đó: hãy để ngữ cảnh hướng dẫn các quyết định thiết kế của bạn.