[HTML/HTML5] Phần 25: Thiết kế web đáp ứng

Thiết kế web đáp ứng là gì?
Thiết kế web đáp ứng (tiếng Anh là Responsive Web Design hay viết tắt RWD) là cách thiết kế để trang web có thể hiển thị trên mọi màn hình ở các thiết bị khác nhau như desktop, tablet, và phone. Đây là cách thiết kế web cực kỳ phổ biến và đang là xu hướng chính để thiết kế giao diện website.

RWD sử dụng HTML và CSS để thu nhỏ, ẩn, co giãn, phóng lớn hay di chuyển nội dung để giao diện web hiển thị tốt trên bất kỳ kích thước màn hình nào. Để thu hút người dùng, cách tốt nhất là giao diện website phải chạy tốt trên mọi màn hình.

Thiết lập cổng xem (viewport)
KHi tạo trang đáp ứng, chúng ta cần thêm thẻ meta để mô tả cổng xem cho giao diện web như sau:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Trong ví dụ trên, nội dung website sẽ có độ rộng (width) phụ thuộc theo kích thước độ rộng của thiết bị, với độ phóng mặc định là 1.0 (100%).

Ví dụ, bạn có 1 trang web không thiết lập viewport và 1 trang web có thiết lập viewport. Bạn sẽ thấy ở trang có viewport thì nội dung sẽ tràn theo độ rộng màn hình.

Hình ảnh đáp ứng
Hình ảnh đáp ứng có kích thước vừa khớp với kích thước trình duyệt, để sử dụng độ rộng đáp ứng, bạn chỉ cần đặt width = 100%.

<img src="dammio.jpg" style="width:100%;">

Lưu ý, trong ví dụ trên hình ảnh bị giãn lớn hơn kích thước thật của hình, vì vậy có thể ảnh sẽ bị mờ. Để tránh bị giãn hơn kích thước, chúng ta có thể dùng thuộc tính max-width.

Sử dụng thuộc tính max-width
Thuộc tính max-width được đặt 100%, hình ảnh sẽ giãn theo màn hình có độ rộng bé hơn độ rộng thực của hình, ngược lại hình ảnh không giãn cao hơn độ rộng thực của hình nếu độ rộng màn hình lớn hơn độ rộng thực của hình.

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

Kích thước chữ đáp ứng
Kích thước chữ có thể đặt bằng đơn vị “vw”, có nghĩa là “”viewport width” (độ rộng cổng xem). Kích thước chữ sẽ theo kích thước trình duyệt.

<h1 style="font-size:10vw">Website dammio.com!</h1>

Trong ví dụ trên, khi màn hình phóng to, thu nhỏ, kích thước chữ sẽ to/nhỏ tùy theo màn hình.

Có nhiều framework cho phép bạn thiết kế web đáp ứng, trong đó nổi bật là Bootstrap, bạn có thể theo dõi series về Bootstrap ở https://www.dammio.com/bootstrap-co-ban.

Kết luận: bài viết nêu 1 số ví dụ cơ bản về thiết kế web đáp ứng, một xu hướng thiết kế rất phổ biến hiện nay, bạn có thể theo dõi series bài viết về Bootstrap để có thể bắt đầu học về thiết kế web đáp ứng.