Trước khi đi sâu vào tìm hiểu Responsive Web Design trong HTML, bạn đọc cùng Taimienphi.vn tìm hiểu về Responsive Web Design là gì nhé.
Mục Lục bài viết:
1. Responsive Web Design là gì?
2. Thiết lập Viewport
3. Responsive Images
3.1. Sử dụng thuộc tính width
3.2. Sử dụng thuộc tính max-width
3.3. Hiển thị kích thước hình ảnh khác nhau
4. Responsive Text Size
5. Media Query trong HTML
6. Framework trong Responsive Web Design
1. Responsive Web Design là gì?
Responsive Web Design sử dụng HTML và CSS để tự động thay đổi kích thước, ẩn, thu nhỏ hoặc phóng to trang web sao cho giao diện phù hợp và trông bắt mắt hơn trên các thiết bị khác nhau có kích thước màn hình khác nhau, chẳng hạn như máy tính, điện thoại di động, ... .
2. Thiết lập Viewport
Khi tạo một trang web phù hợp trên tất cả các thiết bị có kích thước màn hình khác nhau, chúng ta thêm phần tử meta vào tất cả các trang web.
Ví dụ 1: ví dụ dưới đây minh họa cách thiết lập viewport:
Kết quả trả về có dạng như dưới đây:
Bằng cách thiết lập Viewport để cung cấp hướng dẫn cho trình duyệt cách kiểm soát kích thước và tỷ lệ của trang.
Ví dụ 2: dưới đây là ví dụ minh họa một trang web không có thẻ viewport meta (bên trái) và một trang web có thẻ viewport meta (bên phải):
3. Responsive Images
Responsive images là hình ảnh có thể thay đổi kích thước cho phù hợp với kích thước màn hình các thiết bị khác nhau.
3.1 Sử dụng thuộc tính width
Nếu thuộc tính CSS width được thiết lập là 100%, kích thước hình ảnh có thể lớn hơn hoặc nhỏ hơn và thay đổi trên các cửa sổ trình duyệt trên các thiết bị màn hình kích thước khác nhau.
Ví dụ: trong ví dụ dưới đây thuộc tính CSS width được thiết lập là 100%:
Kết quả trả về có dạng như dưới đây:
Lưu ý, trong ví dụ trên hình ảnh có thể được thu nhỏ hơn so với kích thước hình ảnh ban đầu. Trong một số trường hợp, chúng ta có thể sử dụng thuộc tính max-width để thay thế.
3.2. Sử dụng thuộc tính max-width
Nếu thuộc tính max-width được thiết lập thành 100%, hình ảnh sẽ được thu nhỏ để phù hợp với kích thước màn hình các thiết bị nhưng không lớn hơn thước hình ảnh ban đầu.
Ví dụ: trong ví dụ dưới đây thuộc tính CSS max-width được thiết lập là 100%:
Kết quả trả về có dạng như dưới đây:
3.3. Hiển thị kích thước hình ảnh khác nhau
Phần tử picture trong HTML cho phép người dùng chỉ định kích thước hình ảnh khác nhau cho phù hợp với kích thước cửa sổ trình duyệt khác nhau.
Ví dụ: trong ví dụ dưới đây chúng ta có thể chỉ định các kích thước hình ảnh khác nhau để phù hợp với kích thước các cửa sổ trình duyệt khác nhau:
Kết quả trả về có dạng như dưới đây:
4. Responsive Text Size
Text size có thể được thiết lập bằng đơn vị "vw", viết tắt của "viewport width" (chiều rộng của viewport).
Bằng cách này text size sẽ thay đổi, phù hợp với kích thước các cửa sổ trình duyệt trên các thiết bị có kích thước màn hình khác nhau.
Ví dụ: dưới đây là ví dụ về Responsive Text Size:
Kết quả trả về có dạng như dưới đây:
Lưu ý: Viewport là kích thước cửa sổ trình duyệt, 1vw=1% chiều rộng của viewport. Nếu chiều rộng viewport là 50 cm, 1vw là 0.5cm.
5. Media Query trong HTML
Ngoài thay đổi kích thước văn bản và hình ảnh, trên Responsive Web Page chúng ta cũng thường sử dụng Media Query.
Với Media Query, chúng ta có thể xác định các style khác nhau cho các kích thước cửa sổ trình duyệt khác nhau.
Ví dụ: trong ví dụ dưới đây chúng ta có thể thay đổi kích thước cửa sổ trình duyệt để xem 3 phần tử div hiển thị theo chiều ngang trên các thiết bị màn hình lớn và hiển thị theo chiều dọc trên các thiết bị màn hình nhỏ:
Kết quả trả về có dạng như dưới đây:
6. Framework trong Responsive Web Design
Bootstrap
Bootstrap là framework khá phổ biến, sử dụng HTML, CSS và jQuery để tạo Responsive Web Page.
Ví dụ: ví dụ dưới đây minh họa cách sử dụng bootstrap trong HTML:
Kết quả trả về có dạng như dưới đây:
Bài viết trên đây Taimienphi.vn vừa giới thiệu cho bạn về Responsive Web Design trong HTML. Trong các bài viết tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về phần tử Computer Code trong HTML.