Nội dung được quan tâm
Breakpoint
Nếu bạn nghĩ rằng, những breakpoint này xác định độ rộng chính xác của thiết bị được nhắm mục tiêu (như Samsung Galaxy hay IphoneX) thì bạn đang tiếp cận sai cách! Bất cứ điểm nào mà tại đó, website của bạn hiển thị thật tệ thì đó là nơi bạn nên thêm 1 điểm dừng. Những điểm dừng này nhắm vào độ phân giải của màn hình và cụ thể hơn là chiều rộng.
Tại sao không nhắm mục tiêu thiết bị?
- 1 là website của bạn trông tệ ở một kích thước nào đó.
- 2 là bạn đang tự làm khó mình với một công việc phức tạp và luôn phải cập nhật mọi thứ!
Ví dụ như:
-
Nếu màn hình thiết bị nhỏ hơn 480px, website sẽ hiển thị bố cục dành cho điện thoại thông minh
-
Nếu chiều rộng màn hình trong khoảng 480px đến nhỏ hơn 1024px, bố cục máy tính bảng sẽ được hiển thị
-
Nếu chiều rộng màn hình bằng hoặc lớn hơn 1024px, website sẽ hiển thị bố cục thông thường (dàng cho máy tính để bàn).
Tại sao mục tiêu lại là chiều rộng mà không phải chiều cao?
-
Người dùng mong muốn một website có nội dung vừa với cửa sổ trình duyệt mà không có thanh cuộn ngang.
-
Chiều cao là tương đối và rất khó để có thể xác định cũng như tạo bố cục phù hợp với chiều cao.
-
Cuộn dọc tạo cảm giác tự nhiên hơn (chúng ta vẫn thường cuộn chuột hoặc lướt ngón tay theo chiều dọc một cách tự nhiên), còn cuộn ngang thì không!
Bỏ qua chiều cao trong kích thước responsive?
►Tìm hiểu thêm về Website Responsive: web responsive là gì
Một số độ phân giản màn hình phổ biến được sử dụng
Kích thước độ phân giải máy tính bàn phổ biến
-
1366 × 768
-
1920 × 1080
-
1440 × 900
-
1600 × 900
-
1280 × 800
-
1280 × 1024
Kích thước độ phân giải di động phổ biến
-
360 × 640
-
375 × 667
-
720 × 1280
-
320 × 568
-
414 × 736
-
320 × 534
Kích thước độ phân giải máy tính bảng phổ biến
-
768 × 1024
-
1280 × 800
-
600 × 1024
-
601 × 962
-
800 × 1280
-
1024 × 600
Kích thước responsive bao nhiêu là hợp lý?
-
Nhỏ hơn hoặc bằng 768px (Điện thoại thông minh)
-
Lớn hơn 768px (Các thiết bị nhỏ, máy tính bảng)
-
Lớn hơn 992px (Các thiết bị trung bình)
-
Lớn hơn 1200px (Các thiết bị lớn)
Kích thước website responsive thường được sử dụng?
-
Khả năng hiển thị ban đầu: Tất cả thông tin quan trọng được hiển thị trên màn hình đầu tiên mà không cần cuộn trang
-
Khả năng đọc website: Việc đọc văn bản trong các cột khác nhau có dễ dàng không, với cách phân bổ chiều rộng của cột?
-
Thẩm mỹ website: Các yếu tố có kích thước và vị trí phù hợp cho độ phân giản này không? Website của bạn có hiện thị tốt ở độ phân giải đó không?
Sự thay đổi ở mỗi kích thước responsive?
-
Thay đổi phông chữ, màu sắc, khoảng cách
-
Thay đổi hình ảnh
-
Hiển thị/ẩn các yếu tốt
-
Thay đổi độ rộng, bộ cục website
-
Các yếu tố giao diện như nút bấm cũng cần được thay đổi để phù hợp.