Đối với thiết bị di động, độ phân giải thực sự lớn, chỉ có kích thước màn hình là nhỏ. trên cơ sở đó:
Câu trả lời:
Thiết kế đáp ứng dựa trên độ phân giải màn hình cũng như kích thước màn hình. Thay vào đó, thiết kế đáp ứng dựa trên nội dung và cách thức thực hiện cho phép nó phù hợp với tất cả các kích cỡ và độ phân giải.
Cách bạn nghĩ về thiết kế đáp ứng là sai. Tôi cho rằng bạn đến từ một nền tảng thiết kế in ấn thông thường hơn, vâng? Thiết kế cho web là miễn phí nhiều hơn. Các trang web đáp ứng thường không có cùng một điểm dừng thông thường hoặc kích thước / độ phân giải cụ thể mà chúng được tạo vì web cho phép nhiều hơn thế - nó cho phép đạt được tất cả các kích thước màn hình. Như vậy, bạn có thể thiết kế sử dụng bất kỳ kích thước nào phù hợp với những gì bạn đang thiết kế miễn là chúng hợp lý.
Với điều đó đã được nói, thực tiễn tốt nhất là thiết kế theo cách đầu tiên trên thiết bị di động , thực sự nên được đặt tên là di động - quan trọng nhất . Điều này buộc bạn phải tập trung vào nội dung quan trọng nhất và có thể và sau đó cho phép bạn thêm nhiều hơn cho màn hình lớn hơn thay vì buộc bạn phải bắt đầu nhiều hơn trên màn hình lớn, sau đó loại bỏ mọi thứ khi thiết kế cho những màn hình nhỏ hơn. Bạn có thể đọc thêm về điều này trong mồi thiết kế đáp ứng của tôi .
Nhưng chúng tôi cũng phải thiết kế theo cách cho phép đáp ứng. Cách thực hành tốt nhất trong đó là một ví dụ trực tiếp, cho dù ở dạng nguyên mẫu hoặc trong một số chương trình tạo khung, không phải là tài liệu tĩnh như PSD. Khi nói đến phía nhà phát triển, chúng ta nên sử dụng các đơn vị đáp ứng và cấu trúc mã của chúng tôi theo cách có ý nghĩa.
Như đã nói, bạn nên đặt mọi thứ theo pixel, nghĩa là độ phân giải, không phải kích thước màn hình.
Câu hỏi tuyệt vời thực sự!
Chỉ cần một số suy nghĩ ở đây bình luận một chút mâu thuẫn chúng ta đang phải đối mặt ngày hôm nay.
Công nghệ không phải là thứ đáng lẽ phải có từ rất lâu đời.
Tất cả chúng ta nên thiết kế dựa trên các đơn vị thực tế (hoặc kích thước được khai thác) , với một mức độ linh hoạt và tự do để cho phép người dùng thực hiện một số điều chỉnh có tính chất quảng cáo.
Nhưng để biết các phép đo thực tế, chúng ta cần cả hai thông tin. Kích thước phisical và độ phân giải thiết bị = mật độ pixel.
Nhưng nó chỉ ra rằng vài năm trước, các thiết bị màn hình đang bắt đầu khai báo mật độ pixel. Và một số không khai báo nó với máy chủ, chỉ cần công khai nhiều về nó. (Aka Ipad, Iphone)
Độ phân giải màn hình có thể được phát hiện bởi hệ điều hành vì bắt buộc phải gửi tín hiệu tương ứng, nhưng đối với kích thước thực của màn hình, chúng ta cần một cơ sở dữ liệu khổng lồ của mỗi mô hình. Không tốt.
Điều đó cho chúng tôi chỉ với độ phân giải màn hình này mà nó là một số thông tin mà chúng tôi có thể biết.
Nhưng nó hoàn toàn khác nhau khi thiết kế cho một màn hình FullHD lớn hơn độ phân giải tương tự trên thiết bị Mobil. Cả 1920x1080. Ôi.
Một trường hợp đặc biệt là trên máy chiếu, vì chúng tôi không có đầu mối về khoảng cách chiếu và khoảng cách người xem.
Một giải pháp một phần là các truy vấn phương tiện và các yếu tố vector, v.v.
Đối với webdesign: Ít nhất cho đến khi chúng tôi tìm thấy một cái gì đó tốt hơn.
Thiết kế chất lỏng (tỷ lệ phần trăm) và dòng chảy tự nhiên, các phần được xác định rõ.
Rộng 1920
với truy vấn phương tiện có lẽ là 1280
và / hoặc tại 1024
có lẽ ở 720
và 480.
với phát hiện thiết bị để hỗ trợ quảng cáo.
Đối với ứng dụng gốc dành cho thiết bị di động
Vì nó rất cụ thể, chỉ cần tuân theo các nguyên tắc của thương hiệu, liên quan đến UI và Biểu tượng.
Đã chỉnh sửa.
Tại sao chọn độ phân giải màn hình nhỏ trên thiết bị di động FullHD?
Một điện thoại thông minh có độ phân giải thực sự của FullHD nhưng thông thường nó đang tuyên bố độ phân giải nhỏ cho máy chủ và trình duyệt. Bạn có thể kiểm tra địa chỉ này https://www.google.com/search?q=what+is+my+screen+resolution để các truy vấn phương tiện hoạt động.
Đầu tiên, cảm ơn tất cả các câu trả lời và hướng dẫn quý giá, nó chắc chắn đã giúp!
Cho phép tôi thêm kết luận của mình:
Thực tế, nhắm mục tiêu độ phân giải màn hình di động không phải là một UX tốt, độ phân giải quá cao so với màn hình nhỏ, phông chữ sẽ quá nhỏ để đọc, các biểu tượng sẽ quá nhỏ để nhấp, v.v.
Vì vậy, tốt hơn là tạo ra thiết kế dựa trên kích thước khung nhìn thực tế! Bằng cách này, nó dựa trên những gì người dùng có thể nhìn thấy và cảm nhận.
Để đạt được điều đó trong cuộc sống thực, chúng ta nên thêm thẻ meta chiều rộng khung nhìn bên trong các <head>tài liệu HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Điều này báo cho trình duyệt hiển thị trang có chiều rộng bằng chiều rộng màn hình để đảm bảo rằng chiều rộng của trang HTML bằng với chiều rộng màn hình tính theo pixel. Phát triển sau đó có thể được lên kế hoạch dễ dàng với các truy vấn phương tiện nhắm vào các kích thước khung nhìn di động khác nhau (gần với nhau) và sẽ tạo ra các yếu tố rõ ràng hơn.
Xin hãy sửa tôi nếu tôi sai.
Dựa trên kinh nghiệm khiêm tốn của tôi, tôi đề xuất các bước dưới đây để phát triển trang web đáp ứng tốt hơn:
1- sử dụng meta cổng xem (xem trên cùng), nó cũng sẽ tăng thứ hạng của trang web trong kết quả tìm kiếm di động theo google. http://googlewebmastercentral.blogspot.com/2015/04/faqs-april-21st-mobile-friendly.html
Sau khi thử nghiệm, có vẻ như chỉ thêm meta cổng xem sẽ cho điểm trang web của bạn trong các công cụ kiểm tra di động https://developers.google.com/speed/pagespeed/insights/
2- bạn có thể muốn xem xét áp dụng cách tiếp cận đầu tiên trên thiết bị di động, luôn dễ dàng hơn để lớn hơn nhỏ hơn (phụ thuộc vào mức độ phức tạp của trang web của bạn)
3- Áp dụng một hệ thống đáp ứng lai, kết hợp giữa thích ứng (chất lỏng) và đáp ứng (truy vấn phương tiện css), để thực hiện điều này:
Sử dụng tỷ lệ phần trăm cho chiều rộng và lề ngang / paddings. (lề dọc có thể có kích thước pixel cố định nếu bạn muốn .. cuộn không còn là vấn đề nữa)
Sử dụng em cho phông chữ, theo cách này khi bạn thay đổi kích thước phông chữ cho phần thân (hoặc html) trong truy vấn phương tiện, tất cả các phần tử CSS sẽ thích ứng với kích thước đó, sử dụng px sẽ khiến nó trở thành cơn ác mộng vì bạn phải đi từng lớp CSS và thay đổi kích thước phông chữ của nó.
Di chuyển div sang trái để chúng căn chỉnh chính xác vào không gian có sẵn (hoặc bên phải nếu thiết kế của bạn yêu cầu như vậy).
4- Xác định các điểm dừng , sử dụng một công cụ kiểm tra đáp ứng cho điều đó. Tôi sử dụng chế độ xem thiết kế đáp ứng firefox, chỉ cần thu hẹp chiều rộng cho đến khi bạn đạt đến điểm mà trang web bị lỗi (ví dụ 500px), đó là điểm dừng đánh dấu nó.
Áp dụng các quy tắc CSS mới bên trong truy vấn phương tiện cho điểm dừng đó (500px),
5- nhớ giữ gìn chất lượng và sự rõ ràng của trang web! nếu các phần tử trở nên không rõ ràng và quá gần nhau, thì hãy mở rộng chiều rộng của phần tử để chiếm chiều rộng vùng chứa và làm cho chúng xếp chồng theo chiều dọc,
và nhớ cung cấp một cỡ chữ mới cho phần thân để tất cả các thành phần phụ thừa hưởng một phông chữ lớn hơn và trở nên dễ đọc hơn.
6- Lặp lại thử nghiệm phản hồi và xác định điểm dừng thứ hai của bạn, Rất có thể bạn sẽ không nhận được nhiều điểm dừng vì chúng tôi đang sử dụng thiết kế chất lỏng ở đây và đó là nơi sử dụng tỷ lệ phần trăm sẽ hoàn vốn!
Tôi đã làm việc trên một trang web lớn với các yếu tố thiết kế nặng nề trước đây và nó chỉ yêu cầu 2 truy vấn phương tiện :)
Hy vọng rằng sẽ giúp
Làm thế nào một trang phản hồi phản chiếu dựa trên kích thước của chế độ xem (không phải màn hình) trong các pixel ảo (không phải pixel thực).
Trên máy tính để bàn truyền thống có 1 pixel ảo = 1 pixel thực, nếu trình duyệt của bạn được đặt thành chiều rộng 1000px, thì trang sẽ hiển thị lại để phù hợp với điều đó.
Trên iPhone 6, trong đó 1 pixel ảo (Apple gọi những điểm này ) = 3 pixel thực, chiều rộng của trình duyệt là chiều rộng màn hình và nội dung sẽ được điều chỉnh lại để phù hợp với chiều rộng 417px (mặc dù đó thực sự là 1242 pixel thực)
Vì vậy, có một chút kỳ lạ, trong đó với các ví dụ trên, thiết bị có ít pixel thực hơn thực sự được xem là chế độ xem rộng hơn trong bố cục đáp ứng.