HTML Responsive

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    9 thg 10, 2022

  • Số lượt xem

    340 lượt xem


HTML Responsive là tạo ra các trang web trông đẹp mắt trên tất cả các thiết bị với các kích thước màn hình khác nhau.

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.

girl

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>

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về HTML

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.