70. RWD Media Queries Trong CSS Responsive

RWD Media Queries trong CSS Responsive:

Media Queries là công cụ quan trọng trong Responsive Web Design để điều chỉnh kiểu dáng và bố cục của trang web dựa trên kích thước màn hình hoặc các thuộc tính khác của thiết bị. Dưới đây là một ví dụ về cách sử dụng Media Queries để tạo giao diện Responsive:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 20px;
    }

    .container {
      width: 80%;
      margin: 0 auto;
      padding: 20px;
      background-color: #f0f0f0;
      border: 1px solid #ccc;
    }

    @media (max-width: 768px) {
      .container {
        width: 90%;
      }
    }

    @media (max-width: 480px) {
      .container {
        width: 100%;
        padding: 10px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Responsive Design with Media Queries</h1>
    <p>This is a responsive website that adapts to different screen sizes.</p>
  </div>
</body>
</html>

Trong ví dụ này:

Chúng ta sử dụng Media Queries để điều chỉnh kiểu dáng của .container dựa trên kích thước màn hình.
Khi kích thước màn hình nhỏ hơn hoặc bằng 768px, .container sẽ được co lại và chiều rộng chỉ còn 90%.
Khi kích thước màn hình nhỏ hơn hoặc bằng 480px, .container sẽ chiếm toàn bộ chiều rộng và có padding nhỏ hơn.

Sử dụng Media Queries, bạn có thể tùy chỉnh kiểu dáng, bố cục và các yếu tố khác của trang web để tạo giao diện phản hồi cho các loại thiết bị và kích thước màn hình khác nhau.

Leave a Comment Cancel Reply