HTML Responsive là gì?
HTML Responsive là về việc sử dụng HTML và CSS để tự động thay đổi kích thước, ẩn, thu nhỏ hoặc phóng to một trang web để làm cho trang web trông đẹp mắt trên tất cả các thiết bị (máy tính để bàn, máy tính bảng và điện thoại).
Cài đặt Viewport
Để tạo một trang web responsive, hãy thêm thẻ <meta> sau vào tất cả các trang web của bạn:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Điều này cung cấp cho trình duyệt hướng dẫn về cách kiểm soát kích thước và tỷ lệ của trang.
Đây là ví dụ về một trang web không có thẻ meta viewport và một trang web có thẻ meta viewport:
Responsive Images
Responsive Image hiểu đơn giản là làm cho các hình ảnh có tỷ lệ phù hợp với bất kỳ kích thước trình duyệt nào.
Sử dụng attribute width
Nếu đặt cho attribute width hoặc thuộc tính width CSS với giá trị là 100%, thì hình ảnh sẽ tự động tăng hoặc giảm kích thước cho phù hợp nhưng sẽ không bao giờ vượt qua kích thước của parent element.
Ví dụ
<img title="girl" src="https://www.w3schools.com/html/img_girl.jpg" alt="girl" style="max-width:100%;height:auto;" />Hiển thị các hình ảnh khác nhau tùy thuộc vào chiều rộng trình duyệt
HTML element <picture> cho phép bạn xác định các hình ảnh khác nhau cho các kích thước cửa sổ trình duyệt khác nhau. Thay đổi kích thước cửa sổ trình duyệt để xem hình ảnh bên dưới thay đổi như thế nào tùy thuộc vào chiều rộng.
<picture> <source srcset="img_smallflower.jpg" media="(max-width: 600px)"> <source srcset="img_flowers.jpg" media="(max-width: 1500px)"> <source srcset="flowers.jpg"> <img src="img_smallflower.jpg" alt="Flowers"> </picture>
Responsive Font Size
Font size có thể được đặt bằng đơn vị "vw", có nghĩa là "chiều rộng khung nhìn". Bằng cách đó, kích thước văn bản sẽ tuân theo kích thước của cửa sổ trình duyệt.
Hello World
Thay đổi cửa sổ trình duyệt để thấy sự thay đổi về font size.
Ví dụ
<h1 style="font-size:10vw">Hello World</h1>
Media Queries
Ngoài việc thay đổi kích thước văn bản và hình ảnh, người ta cũng thường sử dụng các media queries trong responsive website.
Với các media queries, bạn có thể xác định các style hoàn toàn khác nhau cho các kích thước trình duyệt khác nhau.
Ví dụ
<style> .left, .right { float: left; width: 20%; /* mặc định width là 20% */ } .main { float: left; width: 60%; /* mặc định width là 60% */ } /* Use a media query to add a breakpoint at 800px: */ @media screen and (max-width: 800px) { .left, .main, .right { width: 100%; /* width là 100% ở màn hình nhỏ hơn 800px */ } } </style>Responsive with Bootstrap
Một trong các CSS framework phổ biến là Bootstrap. Bootstrap sử dụng HTML, CSS và jQuery để responsive website.
Ví dụ
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="jumbotron"> <h1>Tiêu đề</h1> </div> <div class="row"> <div class="col-sm-4"> ... </div> <div class="col-sm-4"> ... </div> <div class="col-sm-4"> ... </div> </div> </div> </body> </html>