Thiết kế web đáp ứng [đã đóng]

Question

Tôi là một nhà thiết kế tự học và hiện đang học hỏi từ IDF. Tôi có một vài nghi ngờ về thiết kế đáp ứng.

1. Là một nhà thiết kế, trong khi tôi thiết kế màn hình để cung cấp cho các nhà phát triển, tôi nên thiết kế màn hình cho những kích thước nào? Tôi đang xem xét tất cả các thiết bị và tất cả các độ phân giải có thể có ... điện thoại di động, máy tính xách tay (windows, mac), máy tính bảng, v.v.

2. Một nguồn hoặc liên kết tốt để hiểu cách sử dụng các cột để tạo màn hình.

3. Làm thế nào để xác định phông chữ cho các kích thước khác nhau? Tôi đang sử dụng hướng dẫn Material Design cho màn hình di động, nhưng làm thế nào cho web? Ví dụ: nếu tôi đang sử dụng 16px cho một đoạn văn trong màn hình 1366 * 768 thì phông chữ phải lớn bao nhiêu cho 1440, 1920, 3072 (MacBook Pro 16 ")? .

Có bất kỳ điều quan trọng nào khác có thể giúp tôi hiểu thiết kế đáp ứng không?

Answer 1

1. điều đó phụ thuộc vào các nhà phát triển và các điểm đột phá mà họ đang sử dụng. nếu công việc với bootstrap thì điểm vi phạm của bạn sẽ là: // Các thiết bị cực nhỏ (điện thoại dọc, nhỏ hơn 576px) // Không có truy vấn phương tiện nào vì đây là mặc định trong Bootstrap

// Thiết bị nhỏ (điện thoại ngang, 576px trở lên) @media (min-width: 576px) {...}

// Thiết bị trung bình (máy tính bảng, 768px trở lên) @media (min-width: 768px) {...}

// Thiết bị lớn (máy tính để bàn, 992px trở lên) @media (min-width: 992px) {...}

// Thiết bị cực lớn (máy tính để bàn lớn, 1200px trở lên) @media (min-width: 1200px) {...}

1. https://www.smashingmagazine.com/2017/12/building-better-ui-designs-layout-grids/

2. Cá nhân trong khi thiết kế kiểu chữ, tôi sử dụng quy mô mô-đun: https://www.modularscale.com/?18&px&1.5thường đối với phiên bản dành cho máy tính để bàn, nội dung văn bản tốt có kích thước từ 16-20px. Kích thước phụ thuộc vào nội dung của trang web. I E. nếu đó là nhiều nội dung viết như báo, tôi sẽ xem xét kích thước lớn hơn. Nếu đó là bảng điều khiển / nền tảng hướng dữ liệu, tôi sẽ xem xét kiểu chữ nhỏ hơn.