Thiết Kế Web Linh Hoạt trong HTML

Trước khi khám phá sâu hơn về Thiết Kế Web Linh Hoạt trong HTML, hãy cùng Mytour tìm hiểu về khái niệm Thiết Kế Web Linh Hoạt là gì nhé.

1. Thiết Kế Web Linh Hoạt là gì?

Thiết Kế Web Linh Hoạt sử dụng HTML và CSS để tự động điều chỉnh kích thước, ẩn, thu nhỏ hoặc phóng to trang web để tạo giao diện phù hợp và thú vị hơn trên các thiết bị khác nhau với kích thước màn hình đa dạng như máy tính, điện thoại di động, ... .

2. Cấu Hình Viewport

Khi xây dựng một trang web linh hoạt trên 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:: Dưới đây là một minh họa về cách cấu hình viewport:

Kết quả trả về sẽ giống như sau:

Bằng cách cấu hình Viewport để hướng dẫn trình duyệt kiểm soát kích thước và tỷ lệ của trang.

Ví dụ 2: - Dưới đây là một ví dụ minh họa về trang web không sử dụng thẻ viewport meta (bên trái) và một trang web có sử dụng thẻ viewport meta (bên phải):

3. Hình Ảnh Linh Hoạt

Hình ảnh linh hoạt là những hình ảnh có thể tự động điều chỉnh kích thước để phù hợp với các kích thước màn hình khác nhau của các thiết bị.

3.1 Sử dụng thuộc tính width

Nếu thuộc tính CSS width được đặt là 100%, kích thước của hình ảnh có thể thay đổi để phản ánh các cửa sổ trình duyệt trên các thiết bị với các kích thước màn hình khác nhau.

Ví dụ: Trong ví dụ này, thuộc tính CSS width được đặt là 100%:

Kết quả trả về sẽ như sau:

Lưu ý rằng, trong ví dụ này, hình ảnh có thể được thu nhỏ so với kích thước ban đầu. Trong một số trường hợp, chúng ta có thể sử dụng thuộc tính max-width như một phương pháp thay thế.

3.2. Sử Dụng Thuộc Tính Max-width

Nếu thuộc tính max-width được đặt là 100%, hình ảnh sẽ tự động thu nhỏ để phù hợp với kích thước màn hình của các thiết bị, nhưng không vượt quá kích thước ban đầu của hình ảnh.

Ví dụ: Trong ví dụ dưới đây, thuộc tính CSS max-width được đặt là 100%:

Kết quả trả về sẽ có dạng như sau:

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 đa dạng cho hình ảnh, phù hợp với các cửa sổ trình duyệt khác nhau.

Ví dụ: Trong ví dụ dưới đây, chúng ta có thể đặt các kích thước khác nhau cho hình ảnh để phù hợp với cửa sổ trình duyệt:

Kết quả trả về sẽ có dạng như sau:

4. Kích Thước Văn Bản Phản Hồi

Kích thước văn bản có thể được định rõ 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, kích thước văn bản sẽ thay đổi linh hoạt, phù hợp với kích thướ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à một ví dụ về Kích Thước Văn Bản Phản Hồi:

Kết quả trả về sẽ có dạng như sau:

Lưu ý: Viewport là kích thước của cửa sổ trình duyệt, với 1vw tương đương với 1% chiều rộng của viewport. Ví dụ, nếu chiều rộng của viewport là 50 cm, thì 1vw sẽ bằng 0.5cm.

5. Media Query trong HTML giúp chúng ta linh hoạt thay đổi giao diện trang web tùy thuộc vào kích thước của cửa sổ trình duyệt.

Ngoài việc điều chỉnh kích thước văn bản và hình ảnh, trên Trang Web Phản Hồi chúng ta thường sử dụng Media Query.

Với Media Query, chúng ta có thể định rõ các kiểu dáng 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 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ị có màn hình lớn và hiển thị theo chiều dọc trên các thiết bị có màn hình nhỏ.

Kết quả trả về có dạng như sau:

6. Framework trong Responsive Web Design giúp tối ưu hóa quá trình phát triển trang web phản hồi.

Bootstrap là một trong những framework phổ biến, sử dụng HTML, CSS và jQuery để tạo Trang Web Phản Hồi.

Bootstrap là một framework phổ biến được xây dựng bằng HTML, CSS và jQuery, giúp tạo ra Trang Web Phản Hồi.

Ví dụ: Dưới đây là một minh họa về cách sử dụng Bootstrap trong HTML:

Kết quả trả về sẽ có dạng như sau:

Bài viết này của Mytour giới thiệu về Responsive Web Design trong HTML. Trong các bài viết sắp tới, Mytour sẽ tiếp tục giới thiệu về phần tử Computer Code trong HTML.