Xin chào các bạn, hôm nay mình xin giới thiệu series nội dung bài viết từ cơ bản đến nâng cao về Responsive Web Design (RWD). Trong series này mình sẽ đi từ cơ bản nhất đến rõ ràng nhất về RWD cho những bạn trước đó chưa từng biết gì về RWD có thể dễ dàng tiếp cận, tìm hiểu cũng như vận dụng một cách xác thực và khoa học nhất RWD trong công việc của một FrontEnd Developer. Ở nội dung bài viết trước nhất này mình xin giới thiệu những khái niệm và những thiết lập cơ bản nhất để mở màn với RWD.

Bạn Đang Xem: Từ căn bản đến nâng cao về Responsive Web Design (RWD) – Phần 1

Lưu ý: Series nội dung bài viết này giành riêng cho những ai không chuyên về FrontEnd hoặc là những ai mới mở màn làm về FrontEnd, những FrontEnd Dev kinh nghiệm lâu năm có thể bỏ qua.

Responsive Web Design là gì?

Xem Thêm : CÂY CỎ MÁU CÓ TÁC DỤNG GÌ? – Viện nghiên cứu y học dân tộc

Responsive Web Design là làm cho website của chúng ta cũng có thể xem tốt trên tất cả những thiết bị. Responsive Web Design chỉ sử dụng HTML và CSS. Responsive Web Design không phải là một lớp học hoặc đoạn mã JavaScript.

Thiết kế mang lại trải nghiệm tốt nhất cho tất cả những người dùng

Các website có thể được xem bằng nhiều thiết bị khác nhau: máy tính để bàn, Tablet và điện thoại thông minh. Website của bạn nên trông đẹp và dễ sử dụng trên bất kể thiết bị nào. Các website không nên để nội dung tràn ra ngoài trên các thiết bị có kích thước nhỏ, mà phải thích ứng với nội dung của nó để phù phù hợp với bất kỳ thiết bị nào. Hình ảnh tại chỗ này sẽ mô tả đơn giản một ví dụ về RWD. Desktop Tablet Và Mobile Và nó được gọi là RWD khi chúng ta sử dụng CSS và HTML để thay đổi kích thước, ẩn, co lại, phóng to hoặc vận chuyển nội dung để làm cho bố cục tổng quan website trở thành tương thích ở bất kỳ màn hình hiển thị nào.

Responsive Web Design – Viewport

Viewport là gì?

Viewport tạm dịch là khuông nhìn, là khu vực có thể nhìn thấy của người dùng về nội dung trong một website. Viewport sẽ khác nhau với những thiết bị khác nhau, và sẽ nhỏ hơn trên điện thoại thông minh di động so với trên màn hình hiển thị máy tính. Trước lúc thiết kế cho Tablet và điện thoại thông minh di động, các website chỉ được thiết kế cho màn hình hiển thị máy tính và thông thường các website có thiết kế tĩnh và có kích thước một mực. Sau đó, khi tất cả chúng ta mở màn lướt web bằng phương pháp sử dụng Tablet và điện thoại thông minh di động, các website có kích thước một mực đã quá rộng để phù phù hợp với người dùng. Để khắc phục điều này, các trình duyệt trên các thiết bị này tự động hóa thu nhỏ toàn bộ website để vừa với màn hình hiển thị. Khi chiều ngang của thiết bị quá nhỏ, người dùng phải vuốt ngang để xem hết nội dung của website hoặc xem website với nội dung quá nhỏ và cần phải zoom để đọc được nội dung. Rõ ràng, đây là một trải nghiệm không tốt chút nào cho tất cả những người dùng. Note: Để kiểm tra một website có RWD đạt chất lượng sản phẩm và dịch vụ cao hay là không có thể dùng dụng cụ PageSpeed Insignts của Google để kiểm tra. Nếu đạt tối đa 100 điểm thì có nghĩa website của bạn thật tuyệt vời với mọi thiết bị.

Thiết lập Viewport

HTML5 giới thiệu một phương pháp để được chấp nhận các nhà thiết kế web kiểm soát viewport, thông qua thẻ <metavàgt;. Chúng ta có thể thiết lập meta viewport bằng phương pháp đặt vào trong cặp thẻ <headvàgt; như sau: <meta name=”viewport” content=”width=device-width, initial-scale=1″>

• Thẻ <metavàgt; viewport thiết lập cho website hiển thị tương ứng với kích thước của từng thiết bị khác nhau.
• Tính chất width=device-width đặt chiều rộng của website theo chiều rộng màn hình hiển thị của thiết bị.
• Tính chất initial-scale=1.0 thiết lập mức độ phóng thuở đầu khi trang được trình duyệt tải lần trước nhất, người dùng sẽ không còn thể zoom khi tính chất này có mức giá trị bằng 1.

Xem Thêm : Sụt áp là gì? Nguyên nhân và cách xử lý khi bị sụt áp

Tiếp sau đây là ví dụ về website không có thẻ meta viewport và cùng một website có thẻ meta viewport: Không có thẻ meta viewport Và có thẻ meta viewport

Quy tắc khi thực hiện Responsive Web Design

Nội dung web phải luôn nằm trong giới hạn kích thước của chiều ngang màn hình hiển thị, người dùng chỉ việc cuộn dọc từ trên xuống để xem được hết nội dung của website dễ dàng. Vì vây, nếu để người dùng phải cuộn ngang hoặc zoom website mới xem được toàn bộ nội dung sẽ không còn phải là RWD và dẫn đến trải nghiệm người dùng kém. Một sổ quy tắc khác cần tuân thủ trong những khi làm RWD: 1. Không sử dụng các HTML element có chiều rộng một mực quá rộng – Ví dụ: Một hình ảnh có chiều rộng quá rộng so với chiều rộng của tương đối nhiều thiết bị nhỏ thì khi hiển thị trên các thiết bị này hình ảnh sẽ bị tràn ra ngoài và cần phải cuộn ngang để xem được toàn bộ ảnh. Vì vậy, cần phải kiểm soát và điều chỉnh hỉnh ảnh sao cho phù phù hợp với chiều rộng của từng thiết bị. 2. Sử dụng CSS quảng cáo truyền thông queries để style cho từng thiết bị có chiều rộng khác nhau – Không nên sử dụng các giá trị tuyệt đối như px, pt cho những thành phần mang tính bao quát trong trang, điều này sẽ làm cho nội dung của website sẽ bị tràn khi xem ở thiết bị có chiều rộng nhỏ hơn giá trị đã thiết lập. Thay vì vậy, hãy sử dụng các giá trị mang tính tương đối như %, ví dụ như width: 100%. 3. Sử dụng icon SVG thay cho icon hỉnh ảnh thông thường (JPG, PNG,…) Các icon, hình ảnh dạng SVG sẽ không còn bị mờ khi thu phóng ở bất kỳ kích thước nào, điều này sẽ giúp nội dung của website hiển thị tốt nhất trên các thiết bị Retina như iPhone, iPad, Macbook,…

Mình xin kết thúc phần 1 của series Từ cơ bản đến nâng cao về Responsive Web Design ở đây. Ở nội dung bài viết sau mình sẽ đi vào mô tả rõ ràng các khái niệm về bố cục tổng quan của một website và phương pháp để xây dựng 1 Grid-View ra làm sao. Xin thực tâm cảm ơn các bạn!

Nguồn: https://www.w3schools.com/