Khái niệm

Media Queries là một tính năng của CSS3 cho phép chúng ta áp dụng các kiểu dáng và bố cục khác nhau cho các kích thước màn hình khác nhau. Điều này cho phép chúng ta tạo ra trang web linh hoạt và tương thích trên cả máy tính để bàn, điện thoại di động và máy tính bảng.

Media Queries dựa trên các điều kiện như độ rộng màn hình, chiều cao màn hình, tỷ lệ khung hình và nhiều yếu tố khác. Khi điều kiện đó được đáp ứng, các kiểu dáng và bố cục được áp dụng.

Cách sử dụng

Để sử dụng Media Queries, chúng ta cần đặt các điều kiện và áp dụng các kiểu dáng tương ứng. Dưới đây là một ví dụ minh họa sử dụng Media Queries để thay đổi kích thước phông chữ trên trang web của bạn:

/* Kiểu dáng mặc định */
body {
  font-size: 16px;
}

/* Media Queries cho màn hình nhỏ */
@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

/* Media Queries cho màn hình trung bình */
@media screen and (min-width: 601px) and (max-width: 1024px) {
  body {
    font-size: 18px;
  }
}

/* Media Queries cho màn hình lớn */
@media screen and (min-width: 1025px) {
  body {
    font-size: 20px;
  }
}

Trong ví dụ trên, chúng ta sử dụng @media để bắt đầu một Media Query. Chúng ta định nghĩa các điều kiện bằng cách sử dụng screen để chỉ định loại thiết bị và sử dụng các điều kiện như max-width và min-width để xác định giới hạn kích thước màn hình.

Khi màn hình đáp ứng các điều kiện, các kiểu dáng được áp dụng. Trong ví dụ trên, chúng ta thay đổi kích thước phông chữ trên trang web dựa trên kích thước màn hình. Với màn hình nhỏ hơn 600px, phông chữ sẽ nhỏ hơn. Với màn hình từ 601px đến 1024px, phông chữ sẽ lớn hơn. Và với màn hình lớn hơn 1025px, phông chữ sẽ lớn nhất.