Hướng Dẫn Responsive Templates | Thiết Kế Web Đáp Ứng

Việc sử dụng thiết bị di động để lướt web đang phát triển với tốc độ chóng mặt, nhưng rất tiếc là web không được tối ưu hóa cho các thiết bị di động đó. Thiết bị di động thường bị hạn chế bởi kích thước màn hình và yêu cầu một cách tiếp cận khác nhau về cách hiển thị nội dung trên màn hình, Nhiều kích thước màn hình khác nhau tồn tại trên điện thoại, “phablets”, máy tính bảng, máy tính để bàn, bảng điều khiển trò chơi, TV và thậm chí cả thiết bị đeo được. Kích thước màn hình luôn thay đổi, vì vậy điều quan trọng là trang web của bạn có thể thích ứng với bất kỳ kích thước màn hình nào, hôm nay hoặc trong tương lai.

 Nguyên lý hoạt động 

Thiết kế web đáp ứng (RWD) là một thiết lập nơi máy chủ luôn gửi cùng một mã HTML cho tất cả các thiết bị và CSS được sử dụng để thay đổi hiển thị của trang trên thiết bị. Thuật toán của Google sẽ có thể tự động phát hiện thiết lập này nếu tất cả tác nhân người dùng Google bot được phép thu thập dữ liệu trang và nội dung của trang (CSS, JavaScript và hình ảnh)

Thiết kế đáp ứng phân phối tất cả các thiết bị có cùng mã điều chỉnh kích thước màn hình.

Sử dụng thẻ meta name = “viewport”

Để báo hiệu cho các trình duyệt rằng trang của bạn sẽ thích ứng với tất cả các thiết bị, hãy thêm thẻ meta vào phần đầu của tài liệu meta

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/>

<img src=”img_girl.jpg”style=”width:100%;”>

Lưu ý rằng trong ví dụ trên, hình ảnh có thể được thu nhỏ lại lớn hơn kích thước ban đầu của nó. Một giải pháp tốt hơn, trong nhiều trường hợp, sẽ là sử dụngmax-width.

<img src=”img_girl.jpg”style=”max-width:100%;height:auto;”>

Hiển mọi hình ảnh khác nhau tùy thuộc vào chiều rộng của trình duyệt

Chúc các bạn thành công nhé , nếu thấy hay share hộ mình nhé , Nguồn : Google develop