66. Media Queries Trong CSS

Media Queries trong CSS là một cách để điều chỉnh kiểu dáng của trang web dựa trên các thuộc tính của thiết bị hoặc kích thước màn hình. Điều này giúp tạo ra giao diện phản hồi (responsive) có thể hiển thị tốt trên các loại thiết bị khác nhau. Dưới đây là một ví dụ cụ thể về cách sử dụng Media Queries:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-size: 16px;
    }

    @media (max-width: 600px) {
      body {
        font-size: 14px;
      }
    }

    @media (min-width: 1200px) {
      body {
        font-size: 18px;
      }
    }
  </style>
</head>
<body>
  <p>This is some text.</p>
</body>
</html>

Trong ví dụ này:

Chúng ta sử dụng Media Queries để thay đổi kích thước chữ trên trang web dựa trên kích thước của màn hình.
Ban đầu, kích thước chữ được đặt là 16px cho mọi thiết bị.
Khi kích thước màn hình nhỏ hơn hoặc bằng 600px, kích thước chữ sẽ được thiết lập là 14px.
Khi kích thước màn hình lớn hơn hoặc bằng 1200px, kích thước chữ sẽ được thiết lập là 18px.

Media Queries còn có thể được sử dụng để điều chỉnh các thuộc tính khác như màu sắc, độ rộng, độ cao, padding, margin và nhiều tính năng khác của trang web. Bằng cách sử dụng Media Queries, bạn có thể tạo ra giao diện phản hồi mà thích nghi với các loại thiết bị và kích thước màn hình khác nhau.

Dưới đây là một ví dụ cụ thể hơn về cách sử dụng Media Queries để điều chỉnh giao diện của trang web khi kích thước màn hình thay đổi:

html

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

    .header {
      background-color: #333;
      color: white;
      padding: 10px;
    }

    @media (max-width: 600px) {
      .header {
        padding: 5px;
      }
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>Responsive Header</h1>
  </div>
  <p>This is some text content.</p>
</body>
</html>

Trong ví dụ này:

Chúng ta tạo một phần tử .header đại diện cho phần tiêu đề trên trang web.
Sử dụng CSS để tạo kiểu cho .header, bao gồm background màu đen và màu chữ trắng.
Sử dụng Media Queries @media (max-width: 600px) để thay đổi kiểu dáng của .header khi kích thước màn hình nhỏ hơn hoặc bằng 600px. Trong trường hợp này, chúng ta đơn giản chỉ thay đổi kích thước padding của .header.
Khi kích thước màn hình nhỏ hơn hoặc bằng 600px, .header sẽ có kích thước padding nhỏ hơn để phù hợp với các thiết bị có màn hình nhỏ.

Ví dụ này chỉ minh họa một trường hợp đơn giản. Thông qua Media Queries, bạn có thể điều 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 nhiều loại thiết bị và kích thước màn hình khác nhau.

Leave a Comment Cancel Reply