Responsive Web Design trong HTML

Bài viết dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về Responsive Web Design trong HTML, ngoài ra bạn đọc có thể tham khảo thêm một số bài viết khác đã có trên Taimienphi.vn để tìm hiểu thêm về layout trong HTML.

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:

responsive web design trong html

Kết quả trả về có dạng như dưới đây:

responsive web design trong html 2

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):

responsive web design trong html 3

 

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%:

responsive web design trong html 4

Kết quả trả về có dạng như dưới đây:

responsive web design trong html 5

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%:

responsive web design trong html 6

Kết quả trả về có dạng như dưới đây:

responsive web design trong html 7

 

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:

responsive web design trong html 8

Kết quả trả về có dạng như dưới đây:

responsive web design trong html 9

 

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:

responsive web design trong html 10

Kết quả trả về có dạng như dưới đây:

responsive web design trong html 11

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ỏ:

responsive web design trong html 12

Kết quả trả về có dạng như dưới đây:

responsive web design trong html 13

 

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:

responsive web design trong html 14

Kết quả trả về có dạng như dưới đây:

responsive web design trong html 15

https://thuthuat.taimienphi.vn/responsive-web-design-trong-html-50803n.aspx
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.

Tác giả: Nguyễn Long Thịnh     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Thẻ định dạng đoạn văn bản trong HTML
Thuộc tính id trong HTML, thẻ ID
Thẻ comment trong HTML, tạo chú thích bằng HTML
Đường dẫn file trong HTML, link Ảnh tuyệt đối và tương đối
Thẻ Heading trong HTML, thẻ H1, H2, H3, H4, H5, H6
Từ khoá liên quan:

Responsive Web Design trong HTML

, Responsive Web Design là gì, HTML,

SOFT LIÊN QUAN
  • HTML Creator

    Phần mềm thiết kế web cho người mới

    HTML Creator là phần mềm dành cho người mới học HTML, hỗ trợ người dùng tạo webpage cơ bản kèm theo thiết bị đơn giản mà không cần viết mã (code). Mục đích cuối cùng của người học khi sử dụng HTML Creator là làm quen với cấu trúc khối của ngôn ngữ HTML và xem mã HTML tương ứng trông ra sao khi tạo trang.

Tin Mới


 Mùa hè tới rồi muốn so sánh giá tìm điều hòa giá rẻ nhất thị trường hãy dùng TopGia để so sanh gia có nhiều mẫu dieu hoa để so sanh sanh, xem dieu hoagiá rẻ để so sánh giá