HTML4 23 – Responsive Web Design trong HTML

0
175
Bài số 23 trong series học lập trình HTML, chúng ta sẽ đi tìm hiểu về Responsive Web Design trong HTML. Responsive là 1 thành phần không thể thiếu trong mọi website vì với công cụ này thì website của bạn sẽ tăng trải nghiệm người dùng và cũng được google đánh giá cao hơn. Sau đây chúng ta sẽ cùng tìm hiểu về nó nhé.

Responsive là gì?

Responsive là thuật ngữ dùng để chỉ những website có thiết kế tương thích với nhiều thiết bị, nhiều kích cỡ trình duyệt khác nhau. Trước đây, nếu muốn website có thể xem được trên nhiều thiết bị như di động, máy tính bảng, … thì các nhà thiết kế phải sử dụng nhiều phiên bản giao diện riêng biệt. Điều này làm cho website trở nên cồng kềnh và rất vất vả khi muốn nâng cấp hoặc thay đổi giao diện.

Responsive Web Design là gì?

Responsive Web Design là những thiết kế dành cho website có khả năng tự động chuyển đổi bố cục để tương thích với nhiều kích cỡ khác nhau của trình duyệt, thiết bị.
Responsive web design

Thiết lập viewport

Bạn cần thêm đoạn code sau vào phần header trong thẻ <head> để khai báo với trình duyệt web cần hỗ trợ tính năng reponsive. HTML5 giới thiệu phương pháp cho phép các nhà thiết kế web kiểm soát khung nhìn viewport, thông qua thẻ <meta>. Chế độ xem là vùng có thể nhìn thấy của người dùng trong một trang web. Nó khác với thiết bị và sẽ nhỏ hơn trên điện thoại di động so với trên màn hình máy tính. Bạn nên thêm phần tử <meta> viewport trong tất cả các trang web của bạn. Phần tử <meta> viewport cung cấp hướng dẫn của trình duyệt về cách kiểm soát kích thước và quy mô trang. Phần width=device-width đặt chiều rộng của trang theo chiều rộng màn hình của thiết bị (sẽ khác nhau tùy thuộc vào thiết bị). Phần initial-scale=1.0 thiết lập mức độ phóng ban đầu khi trang được trình duyệt tải lần đầu tiên. Dưới đây là ví dụ về trang web không có thẻ meta chế độ xem và cùng một trang web có thẻ meta chế độ xem:
Không có thẻ meta viewport Có thẻ meta viewport
Ok, thế là chúng ta hoàn thành bước 1, sau bước này đảm bảo được website chúng ta có thể chạy được các thủ thuật responsive mà chúng ta thực hiện ở các bước sau.

Responsive Ảnh Images

Responsive Ảnh sẽ giúp ảnh hiển thị phù hợp với bất cứ kích cỡ nào trên website mà vẫn hiển thị toàn bộ nội dung hình ảnh. Để responsive cho ảnh, chúng ta sử dụng thuộc tính width giá trị là 100%. Ví dụ: Lưu ý: Trong 1 số trường hợp, ảnh sẽ bị thay đổi kích cỡ trở nên lớn hơn so với kích cỡ ảnh thực ban đầu. Để giải quyết vấn đề này, trong 1 số trường hợp, bạn nên sử dụng thuộc tính max-width. Nếu thiết lập max-width giá trị 100%, khi đó ảnh sẽ có kích cỡ tối đa luôn luôn là kích cỡ thật của ảnh, còn ảnh vẫn có thể giảm kích cỡ khi responsive theo các thiết bị.

Kết luận

Trên đây, là những vấn đề về Responsive trong HTML, kiến thức Responsive còn liên quan tới CSS nữa, nên chúng ta sẽ tìm hiểu nốt khi học đến phần CSS nhé. Nhưng qua bài này, các bạn đã hiểu Responsive là gì rồi đúng không nào. Hẹn gặp lại các bạn trong các bài học kế tiếp. Chúc các bạn học tập tốt!  

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây