Xin chào các bạn, hôm nay tôi muốn giới thiệu loạt bài viết từ cơ bản đến nâng cao về Thiết kế Web Tương ứng (RWD). Trong loạt bài viết này, tôi sẽ hướng dẫn từ những khái niệm cơ bản nhất đến chi tiết nhất về RWD để giúp các bạn mới bắt đầu hoặc không có kinh nghiệm về phát triển Front-end dễ dàng tiếp cận, tìm hiểu và áp dụng RWD một cách chính xác và khoa học trong công việc của một nhà phát triển Front-end. Trong bài viết đầu tiên này, tôi xin giới thiệu các định nghĩa và các thiết lập cơ bản để bắt đầu với RWD.
- Tour là gì? Tour du lịch là gì? Ưu nhược điểm khi du lịch theo tour?
- Sấy thăng hoa là gì? Nguyên lý và ưu nhược điểm.
- ” Quái Xế Là Gì ? Quái Xế Chiếm Quốc Lộ 1 Làm Đường Đua Quái Xế Có Nghĩa Là Gì
- Định chế tài chính (Financial Institution) là gì? Phân loại
- Visual Studio là gì? Những tính năng cần thiết của Visual Studio
Lưu ý: Loạt bài viết này dành cho những người không chuyên về phát triển Front-end hoặc những người mới bắt đầu làm việc với Front-end, các nhà phát triển Front-end có kinh nghiệm lâu năm có thể bỏ qua.
Bạn đang xem: Từ căn bản đến nâng cao về Responsive Web Design (RWD) – Phần 1
Thiết kế Web Tương ứng là gì?
Thiết kế Web Tương ứng là việc làm cho trang web của bạn có thể hiển thị tốt trên tất cả các thiết bị. Thiết kế Web Tương ứng chỉ sử dụng HTML và CSS. Nó không phải là một chương trình hoặc đoạn mã JavaScript.
Thiết kế mang lại trải nghiệm tốt nhất cho người dùng
Xem thêm : Khoảng tin cậy (Confidence Interval) là gì? Những quan niệm sai lầm về Khoảng tin cậy
Trang web có thể được xem trên nhiều thiết bị khác nhau: máy tính để bàn, máy tính bảng và điện thoại di động. Trang web của bạn nên trông đẹp và dễ sử dụng trên mọi thiết bị. Nội dung trang web không nên tràn ra ngoài trên các thiết bị có màn hình nhỏ, mà phải thích ứng để phù hợp với bất kỳ thiết bị nào. Hình ảnh dưới đây mô tả một ví dụ đơn giản về RWD. Máy tính để bàn 
Máy tính bảng và Điện thoại di động. Đây được gọi là RWD khi bạn sử dụng CSS và HTML để thay đổi kích thước, ẩn, thu gọn, phóng to hoặc di chuyển nội dung để làm cho cấu trúc trang web phù hợp với mọi màn hình.
Thiết kế Web Tương ứng – Viewport
Viewport là gì?
Viewport, còn được gọi là khung nhìn, là khu vực có thể nhìn thấy nội dung trên một trang web. Viewport sẽ khác nhau trên các thiết bị khác nhau và sẽ nhỏ hơn trên điện thoại di động so với màn hình máy tính. Trước đây, trang web chỉ được thiết kế cho màn hình máy tính, với kích thước cố định. Sau đó, khi ta bắt đầu sử dụng máy tính bảng và điện thoại di động để duyệt web, trang web với kích thước cố định sẽ quá rộng để hiển thị trên các thiết bị này. Để giải quyết vấn đề này, các trình duyệt trên các thiết bị này tự động thu nhỏ toàn bộ trang web để phù hợp với màn hình. Khi chiều ngang của thiết bị nhỏ, người dùng phải kéo qua ngang để xem toàn bộ nội dung hoặc xem nội dung nhỏ và cần phải zoom để đọc. Điều này không mang lại trải nghiệm tốt cho người dùng. Lưu ý: Bạn có thể sử dụng công cụ PageSpeed Insights của Google để kiểm tra chất lượng RWD của trang web. Nếu đạt điểm tối đa là 100 điểm, có nghĩa là trang web của bạn tuyệt vời trên mọi thiết bị.
Thiết lập Viewport
HTML5 giới thiệu một phương pháp cho phép các nhà thiết kế web kiểm soát viewport qua thẻ meta. Bạn có thể thiết lập meta viewport như sau trong thẻ head:
- Thẻ meta viewport giúp hiển thị trang web phù hợp với kích thước của từng thiết bị.
- Thuộc tính width=device-width đặt chiều rộng của trang web theo chiều rộng màn hình của thiết bị.
- Thuộc tính initial-scale=1.0 đặt mức độ phóng ban đầu khi trang được tải lần đầu, người dùng không thể zoom khi giá trị này bằng 1.
Xem thêm : NMN là gì? Tác dụng của NMN không phải ai cũng biết
Dưới đây là ví dụ về một trang web không có thẻ meta viewport và cùng một trang web có thẻ meta viewport: Không có thẻ meta viewport 
Và có thẻ meta viewport 
Nguyên tắc khi thực hiện Thiết kế Web Tương ứng
Nội dung web phải luôn nằm trong giới hạn chiều ngang màn hình, người dùng chỉ cần cuộn dọc để xem nội dung dễ dàng. Do đó, nếu người dùng phải cuộn ngang hoặc zoom để xem toàn bộ nội dung, đó không phải là RWD và làm giảm trải nghiệm người dùng. Dưới đây là một số quy tắc cần tuân thủ khi thực hiện RWD: 1. Không sử dụng các phần tử HTML có chiều rộng cố định quá lớn – Ví dụ: Một hình ảnh có chiều rộng quá lớn so với màn hình của thiết bị nhỏ sẽ dẫn đến việc hình ảnh bị tràn ra ngoài và người dùng phải cuộn ngang để xem hết. Điều này yêu cầu điều chỉnh kích thước hình ảnh để phù hợp với từng thiết bị. 2. Sử dụng CSS media queries để thiết kế cho các thiết bị có chiều rộng khác nhau – Không sử dụng các giá trị tuyệt đối như pixel hoặc point cho các phần tử quan trọng trong trang, điều này sẽ làm cho nội dung của trang bị tràn ra khi xem trên các thiết bị có chiều rộng nhỏ hơn giá trị đã thiết lập. Thay vào đó, hãy sử dụng các giá trị tương đối như phần trăm, ví dụ: width: 100%. 3. Sử dụng biểu tượng SVG thay vì hình ảnh thông thường (JPG, PNG, …) – Biểu tượng và hình ảnh dạng SVG sẽ không mờ khi phóng to ở bất kỳ kích thước nào, điều này giúp hiển thị nội dung tốt nhất trên các thiết bị có màn hình Retina như iPhone, iPad, Macbook, …
Đó là phần 1 của loạt bài viết Từ cơ bản đến nâng cao về Thiết kế Web Tương ứng. Trong bài viết tiếp theo, tôi sẽ mô tả chi tiết về các khái niệm về bố cục của trang web và cách xây dựng Grid-View. Xin chân thành cảm ơn các bạn!
Nguồn: https://www.w3schools.com/
