Thiết kế web đáp ứng là gì?


HTML

Thiết kế web đáp ứng là cách sử dụng HTML và CSS để tự động thay đổi kích thước trang web.

Thiết kế web đáp ứng là về việc làm cho trang web trông đẹp 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):


Phản ứng nhanh nhẹn

Đặt chế độ xem

Khi tạo các trang web đáp ứng, hãy thêm <meta>phần tử sau vào tất cả các trang web của bạn:

Thí dụ

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Truy vấn phương tiện truyền thông

Truy vấn phương tiện đóng một vai trò quan trọng trong các trang web đáp ứng.

Với truy vấn phương tiện, bạn có thể xác định các kiểu khác nhau cho các kích thước trình duyệt khác nhau.

Ví dụ:
Thay đổi kích thước cửa sổ trình duyệt để thấy rằng ba phần tử bên dưới sẽ hiển thị theo chiều ngang trên màn hình lớn và theo chiều dọc trên màn hình nhỏ:

Nội dung chính


Đúng


Thí dụ

<style>
.left, .right {
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.main {
  float: left;
  width: 60%; /* The width is 60%, by default */
}

/* Use Media Query to add a breakpoint at 800px: */
@media screen and (max-width:800px) {
  .left , .main, .right {width:100%;}
}
</style>

Tìm hiểu thêm về Thiết kế web đáp ứng tại Hướng dẫn về RWD của W3Schools


Hình ảnh đáp ứng

Responsive images are images that scale nicely to fit any browser size.

When the CSS width property is set to a percentage value, an image will scale up and down when resizing the browser window.

This image is responsive:

Example

<img src="img_girl.jpg" style="width:80%;height:auto;">

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:

Example

<img src="img_girl.jpg" style="max-width:100%;height:auto;">


Image Depending on Browser Size

The HTML <picture> element allows you to define different images for different browser window sizes.

Example

<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 W3.CSS

W3.CSS is a free CSS Framework that offers Responsive Design by default.

W3.CSS makes it easy to develop sites that look nice on any device; desktop, laptop, tablet, or phone:

Example

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-center w3-padding-64 w3-light-grey">
  <h1>My W3.CSS Page</h1>
  <p>Resize this page to see the responsive effect!</p>
</div>

<div class="w3-row-padding">
  <div class="w3-third">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
  </div>

  <div class="w3-third">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
    <p>The Paris area is one of the largest population centers in Europe,
    with more than 12 million inhabitants.</p>
  </div>

  <div class="w3-third">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
    <p>It is the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</div>

</body>
</html>

To learn more about W3.CSS, go to our W3.CSS Tutorial.


Bootstrap

Bootstrap is a very popular framework that uses HTML, CSS and jQuery to make responsive web pages.

Example

<!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/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4">
      <h2>London</h2>
      <p>London is the capital city of England.</p>
      <p>It is the most populous city in the United Kingdom,
      with a metropolitan area of over 13 million inhabitants.</p>
    </div>
    <div class="col-sm-4">
      <h2>Paris</h2>
      <p>Paris is the capital of France.</p>
      <p>The Paris area is one of the largest population centers in Europe,
      with more than 12 million inhabitants.</p>
    </div>
    <div class="col-sm-4">
      <h2>Tokyo</h2>
      <p>Tokyo is the capital of Japan.</p>
      <p>It is the center of the Greater Tokyo Area,
      and the most populous metropolitan area in the world.</p>
    </div>
  </div>
</div>

</body>
</html>

To learn more about Bootstrap, go to our Bootstrap Tutorial.