kiểm tra Responsive trong thiết kế website design

Khi thực hiện việc, bạn có thể khảo sát Responsive bằng cách co giãn kích thước trình ưng chuẩn thủ công nhưng nó không được “logic” cho lắm. Mà mình sẽ khuyến khích quý khách tiêu dùng các dụng cụ hỗ trợ để khảo sát, một trong những công cụ kiểm sát Responsive mà mình thích nhất đó là Resizer, cực kỳ đơn giản tiêu dùng và gọn nhẹ. Hãy xem cách tiêu dùng bằng ảnh dưới:

Danh sách các kích thước màn hình trang bị

Khi viết CSS cho giao diện Responsive, việc quan trọng nhất là bạn phải nắm được kích thước màn hình của các loại điện thoại thông dụng để thường viết CSS được như mong muốn và đảm bảo nó vận hành hiệu quả trên rộng rãi thứ, nhất là các thiết bị thông dụng. Bạn thường tham khảo các size chiều rộng của các đồ vật tại đây, nhưng đa phần một dự án bạn chỉ cần phải tạo các breakpoint CSS như là sau:

  • max-width: 320px (điện thoại di động, hiển thị chiều dọc)
  • max-width: 480px (điện thoại di động, hiển thị chiều ngang)
  • max-width: 600px (máy tính bảng, hiển thị chiều dọc)
  • max-width: 800px (máy tính bảng, hiển thị chiều ngang)
  • max-width: 768px (máy tính bảng loại to, hiển thị chiều dọc)
  • max-width: 1024px (máy tính bảng loại to, hiển thị chiều ngang)
  • min-width: 1025px (từ size này trở lên là danh tặng desktop thông thường).

 

5/5 - (1 bình chọn)

Responsive Web Design Cẩm Nang Thiết kế Web

Lê Trương Tấn Lộc (sieutocviet.vn)

Trải qua 3 năm thực chiến Laravel 5 năm kinh nghiệm trong quản trị website tư vấn giải pháp SEO từ khóa, Marketing tối ưu nhất cho công ty.
Hiện là quản lý kinh doanh tại Siêu Tốc Việt.