12/08/2018, 16:51

Từ căn bản đến nâng cao về Responsive Web Design (RWD) - Phần 1

Xin chào các bạn, hôm nay mình xin giới thiệu series bài viết từ căn bản đến nâng cao về Responsive Web Design (RWD). Trong series này mình sẽ đi từ căn bản nhất đến chi tiết nhất về RWD cho những bạn 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ư áp dụng một cách chính xác và ...

Xin chào các bạn, hôm nay mình xin giới thiệu series bài viết từ căn bản đến nâng cao về Responsive Web Design (RWD). Trong series này mình sẽ đi từ căn bản nhất đến chi tiết nhất về RWD cho những bạn 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ư áp dụng một cách chính xác và khoa học nhất RWD trong công việc của một FrontEnd Developer. Ở bài viết đầu tiên này mình xin giới thiệu những định nghĩa và những thiết lập căn bản nhất để bắt đầu với RWD.

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

Responsive Web Design là gì?

Responsive Web Design là làm cho trang web của bạn có thể xem tốt trên tất cả các thiết bị. Responsive Web Design chỉ sử dụng HTML và CSS. Responsive Web Design 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

Các trang web có thể được xem bằng 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. Trang web của bạn nên nhìn đẹp và dễ sử dụng trên bất kể thiết bị nào. Các trang web 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ù hợp với bất kỳ thiết bị nào. Hình ảnh dưới đâ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 bạn sử dụng CSS và HTML để thay đổi kích thước, ẩn, co lại, phóng to hoặc di chuyển nội dung để làm cho bố cục trang web trở nên tương thích ở bất kỳ màn hình nào.

Responsive Web Design - Viewport

Viewport là gì?

Viewport tạm dịch là khung 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 trang web. Viewport sẽ khác nhau với các thiết bị khác nhau, và sẽ nhỏ hơn trên điện thoại di động so với trên màn hình máy tính. Trước khi thiết kế cho máy tính bảng và điện thoại di động, các trang web chỉ được thiết kế cho màn hình máy tính và thông thường các trang web có thiết kế tĩnh và có kích thước cố định. Sau đó, khi chúng ta bắt đầu lướt web bằng cách sử dụng máy tính bảng và điện thoại di động, các trang web có kích thước cố định đã quá lớn để 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 thu nhỏ toàn bộ trang web để vừa với màn hình. 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 trang web hoặc xem trang web 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 người dùng. Note: Để kiểm tra một trang web có RWD đạt chất lượng cao hay không có thể dùng công cụ PageSpeed Insignts của Google để kiểm tra. Nếu đạt tối đa 100 điểm thì có nghĩa trang web 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 để cho phép các nhà thiết kế web kiểm soát viewport, thông qua thẻ <meta>. Bạn có thể thiết lập meta viewport bằng cách đặt vào trong cặp thẻ <head> như sau: <meta name="viewport" content="awidth=device-awidth, initial-scale=1">

  • Thẻ <meta> viewport thiết lập cho trang web hiển thị tương ứng với kích thước của từng thiết bị khác nhau.
  • Thuộc tính awidth=device-awidth đặ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 thiết lập mức độ phóng ban đầu khi trang được trình duyệt tải lần đầu tiên, người dùng sẽ không thể zoom khi thuộc tính này có giá trị bằng 1.

Dưới đây là ví dụ về 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

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, người dùng chỉ cần cuộn dọc từ trên xuống để xem được hết nội dung của trang web dễ dàng. Vì vây, nếu để người dùng phải cuộn ngang hoặc zoom trang web mới xem được toàn bộ nội dung sẽ không 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 khi làm RWD: 1. Không sử dụng các HTML element 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 chiều rộng của các 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 điều chỉnh hỉnh ảnh sao cho phù hợp với chiều rộng của từng thiết bị. 2. Sử dụng CSS media 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 các phần tử mang tính bao quát trong trang, điều này sẽ làm cho nội dung của trang web 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ư awidth: 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 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 trang web 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ăn bản đến nâng cao về Responsive Web Design ở đây. Ở bài viết sau mình sẽ đi vào mô tả chi tiết các định nghĩa về bố cục của 1 trang web và cách để xây dựng 1 Grid-View như thế nào. Xin chân thành cảm ơn các bạn!

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

Bài liên quan

Golang Tag: Từ Cơ Bản đến Nâng Cao

Tag Là Gì Tag trong Golang được sử dụng để bổ sung thêm thông tin cho các field của một struct. Để hiểu rõ hơn Tag được sử dụng như thế nào và tại sao cần sử dụng chúng thì chúng ta hay bắt đầu với một số ví dụ đơn giản tạo Struct trong Golang mà không sử dụng Tag ở phần dưới đây. Struct ...

Bùi Văn Nam viết 11:18 ngày 07/09/2018

20 tài liệu lập trình Python cơ bản đến nâng cao hay nhất

Những tài liệu lập trình Python xuất sắc bằng cả tiếng Việt và tiếng Anh, giúp bạn: Tự học ngôn ngữ lập trình Python cơ bản đến nâng cao Cập nhật kiến thức mới nhất từ các chuyên gia Xem việc làm Python Developer trên ITviec Python là gì? Học Python để làm gì? Với cú pháp cực ...

Tạ Quốc Bảo viết 15:36 ngày 31/08/2018

19 tài liệu JavaScript cơ bản đến nâng cao hay nhất

ITviec tổng hợp những tài liệu JavaScript chất nhất, giúp bạn: Tìm hiểu JavaScript cơ bản đến nâng cao Cập nhật kiến thức mới về JavaScript Tự học JavaScript qua các kênh miễn phí Tham khảo hàng trăm việc làm JavaScript tại ITviec. JavaScript là gì? JavaScript dùng để làm gì? ...

Tạ Quốc Bảo viết 15:29 ngày 31/08/2018

Học JSP cơ bản đến nâng cao

JavaServer Pages (JSP) là một công nghệ lập trình Server-Side mà cho bạn khả năng xây dựng các ứng dụng trên Web động, độc lập nền tảng. JSP có quyền truy cập tới toàn bộ gia đình Java APIs, bao gồm JDBC API để truy cập Enterprise Database. Loạt bài này sẽ hướng dẫn bạn cách sử dụng Java ...

Hoàng Hải Đăng viết 10:41 ngày 14/08/2018

Học React Native từ cơ bản đến nâng cao - Phần 2: Khái niệm cơ bản trong React Native và 1 số chia sẻ cá nhân

Trong phần này tôi sẽ giúp các bạn mới học React Native hiểu qua phần cài đặt project đã tồn tại và cùng nhau tìm hiểu khái niệm cơ bản nhất của React Native. 1. Yêu cầu thứ 1 Yêu cầu để thực hiện theo bài viết này, bạn hãy cài đặt môi trường theo bài viết dưới đây Học React Native từ cơ bản ...

Bùi Văn Nam viết 18:26 ngày 12/08/2018
0