VNIT

Chia Sẻ Giá Trị


Liên Hệ Dịch Vụ

26 tháng 8, 2018

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

Vnit Tech
tháng 8 26, 2018 - 26 tháng 8, 2018

Ý nghĩa

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"/>
 Hình minh họa
Nếu thuộc tính CSS widthđược đặt thành 100%, hình ảnh sẽ phản hồi và tăng tỷ lệ lên và xuống.
<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

<picture>
  <sourcesrcset="img_smallflower.jpg" media="(max-width: 600px)">
  <sourcesrcset="img_flowers.jpg"media="(max-width: 1500px)">
  <sourcesrcset="flowers.jpg">
  <imgsrc="img_smallflower.jpg"alt="Flowers">
</picture>
Kích thước văn bản có thể được đặt bằng đơn vị "vw", có nghĩa là "chiều rộng khung nhìn". Bằng cách đó kích thước văn bản sẽ theo kích thước của cửa sổ trình duyệt:

<h1 style="font-size:10vw">Hello World</h1>

LỜI KẾ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

xem thêm tại Google develop
DMCA.com Protection Status

Dịch Vụ Thiết Kế WebSite


Bán hàng đảm bảo Thiết Kế Web

Chúng tôi cung cấp website theo mẫu , thiết kế web Theo Yêu Cầu

Cam kết giá tốt Cam kết giá tốt

Website Trên Blogvnit Cam Kết Với Giá Tốt Nhất Hiện Nay

Giao hàng toàn quốc Bảo Hành , Fix Lỗi

Bảo hành hỗ trợ cài đặt miễn phí đến khi hợp ý khách hàng

Dịch vụ hỗ trợ 24/7 Dịch vụ hỗ trợ 24/7

Đội ngũ nhân viên của blogvnit Hân hạnh đồng hành cùng bạn

BÁO GIÁ DỊCH VỤ