Bùi Tấn Lực - 1002
- 14/10/2024
Bùi Tấn Lực 
Responsive là gì? Đó là dùng css thiết lập chế độ hiển thị của website trên tất cả thiết bị bao gồm PC, mobile, tablet.. được hiển thị tốt trên từng giao diện, chi tiết như nào hãy cùng chúng tôi phân tích:
Responsive là gì? Tại sao Responsive Web Design quan trọng
Mục Lục [Ẩn]
Responsive là gì?
Responsive là dùng css thiết lập chế độ hiển thị của website trên tất cả thiết bị bao gồm PC, mobile, tablet.. được hiển thị tốt nhất, phù hợp trên từng giao diện, giúp người dùng xem được thông tin trên trang web hiệu quả nhất khi dùng bất kỳ thiết bị nào.
Xem thêm bài viết SEO là gì?
Các bước thiết kế website chuẩn Responsive
Bước 1: Khai báo thẻ Meta viewport của website
Bạn phải khai báo thẻ meta viewport trước khi responsive để cho giao diện website có thể hiển thị tương thích với tất cả màn hình của tất cả các thiết bị.
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
Khai báo xong bạn ra ngoài web nhấn ctrl U, rồi nhấn ctrl F nhập từ khóa viewport để xem thẻ meta mà bạn khai báo đã hiển thị đúng chưa.
Bước 2: Viết CSS cho từng giao diện thiết bị
Thông thường bạn nhìn vào sản phẩm hay bài viết tin tức để chia giao diện, ở mức giao diện nào để 4 cột thì bạn chia ra, 3 cột, 2 cột, 1 cột thì chia ra từng mốc chiều rộng màn hình khác nhau, nhóm lại theo từng mốc chiều rộng, phần nào cần css chung cho tất cả mốc chiều rộng trên tất cả di động thì bạn để vào max-width cao nhất.
Để responsive cho tất cả giao diện di động bạn tham khảo đoạn khai báo @media dưới đây:
body {background-color: #fff;color: #000;
}
@media (max-width: 1200px) {
body {background-color: red;}
}
@media (max-width: 800px) {
body {background-color: yellow;}
}
@media (max-width: 600px) {
body {background-color: green;}
}
@media (max-width: 300px) {
body {background-color: pink;}
}
Bước 3: Kiểm tra responsive có chuẩn chưa?
Bạn dùng trình duyệt chrome trên máy tính co giãn giao diện nhỏ to để kiểm tra giao diện ở từng độ rộng khác nhau, kết hợp kiểm tra dưới các thiết bị di động, ipad, kiểm tra trên các máy tính khác nhau nữa.
Hoặc dùng Toggle device toolbar của chrome để kiểm tra:
Bạn để chuột ở vị trí trên giao diện website sau đó nhấn chuột phải rồi chọn kiểm tra, Bên góc dưới trái có nút Toggle device toolbar bạn nhấn vào đó sẽ xuất hiện giao diện kiểm tra trên các thiết bị điện thoại:
Dimensions: Reponsive là ô chọn các loại di động khác nhau.
Ô chiều rộng chiều cao hiển thị chiều rộng chiều cao của từng thiết bị bạn chọn, bạn có thể nhập chiều rộng chiều cao theo ý mình vào 2 ô này.
Tại sao Responsive Web Design quan trọng
Đáp ứng nhu cầu thực tế
Giờ đây ai cũng có một chiếc điện thoại thông minh để lướt web, nếu vô điện thoại mà chỉ hiển thị giao diện máy tính thì sẽ nhìn không rõ và không thấy được gì hết, cho nên phải responsive để trên tất cả giao diện điện thoại, ipad hiện đầy đủ thông tin cho người dùng dễ thấy và giao diện trên di động phải đẹp trình bày rõ ràng để người truy cập lướt web tốt.
Responsive giúp hiệu quả kinh tế
Tất nhiên rồi, giao diện responsive đầy đủ thông tin và chuyên nghiệp, giao diện đẹp mắt tiện sử dụng thì sẽ mang sản phẩm, dịch vụ của bạn tới gần khách hàng hơn, kích thích khả năng mua hàng hơn.
Được Google Search khuyến khích, lợi ích cho SEO
Giờ đây Google đã đưa giao diện mobi vào diện ưu tiên để xếp hạng SEO, nếu trong quá trình kiểm tra URL nào không chuẩn trên giao diện mobi nhất là bị lỗi giao diện di động thì google sẽ có thông báo trong Google Search Console, hoặc bạn cũng có thể kiểm tra giao diện mobi có chuẩn không ở trên công cụ này.
Cải thiện trải nghiệm người dùng
Vào bằng di động mà giao diện web không được Responsive thì sẽ khó nhìn và tỷ lệ thoát trang là rất cao, nhưng nếu có giao diện Responsive thì lại khác, người dùng sẽ lướt web dễ dàng hơn, xem thông tin được tốt hơn góp phần tăng trải nghiệm người dùng rất nhiều. Bên cạnh đó sẽ giúp giảm tỷ lệ thoát và tăng thời gian phiên.
Các vị trí xây dựng Responsive Web thông dụng
Responsive Menu
Menu khi hiện trên máy tính sẽ hiện theo hàng ngang gần hết chiều rộng trang web hoặc hiện theo chiều dọc sổ từ trên xuống, lúc rê chuột vô sẽ sổ ra menu con. Khi hiện trên di động cần làm gọn menu vào một nút menu, khi người dùng di động chỉ cần click vào nút menu sẽ hiện ra các cấp menu cho họ thấy.
Responsive Column
Như trường hợp sidebar left, sidebar right và content thì có 3 cột, khi Responsive mình làm mỗi cái một cột. Còn trường hợp sản phẩm, bài viết tin tức thường có 3,4,5 cột thì khi Responsive tuy từng nhóm chiều rộng mà mình cho hiển thị 4 cột, 3 cột, 2 cột, 1 cột, giao diện có chiều rộng nhỏ thì chia ít cột, giao diện có chiều rộng lớn thì chia nhiều cột.
Responsive Font Size
Những chữ có font lớn trên máy tính thì lúc hiển thị trên giao diện di động bạn nên cho nhỏ lại tùy vào chiều rộng của từng thiết bị di động hay tùy vào nhóm chiều rộng mà cho font chữ nhỏ lại hợp lý từng nhóm.
Responsive Image
Hình ảnh khi xuất hiện trên máy tính là hình ảnh có kích thước lớn nhưng khi hiển thị dưới di động nên cho chiều rộng của hình ảnh có dãn theo từng màn hình, chiều cao cho auto theo chiều rộng. Chiều rộng hình ảnh không được vượt khỏi chiều rộng của màn hình, bạn nên để max-width:100%.
Một số công cụ kiểm tra Responsive Web Design miễn phí
Extension Viewport Resize
Công cụ này rất dễ sử dụng và hỗ trợ rất tốt cho trình duyệt Chrome và trên webstore của Google Chrome các bạn có thể add extension này.
Sử dụng trình duyệt Blisk
Trình duyệt này có nền tảng Chromium là một công cụ thật sự đắc lực cho các web developer với tính tăng kiểm tra responsive.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Responsive là gì?
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
