Kiến thức cơ bản về media query

media query trong CSS cho phép trang web thích ứng với các kích thước màn hình khác nhau bằng cách áp dụng kiểu dựa trên chiều rộng, chiều cao hoặc các thuộc tính khác của thiết bị.

Cú pháp cơ bản của media query:

@media (condition) {  
    selector {  
        property: value;  
    }  
}

• điều kiện: Quy tắc kích hoạt kiểu hiển thị (ví dụ: max-width: 600px).
• bộ chọn: (các) phần tử HTML cần tạo kiểu.

• thuộc tính: Thuộc tính CSS cần đặt (ví dụ: width, font-size).
• giá trị: Giá trị được gán cho thuộc tính, thay đổi tùy theo điều kiện của media query.

Trong media query, điều kiện có thể dựa trên nhiều yếu tố như kích thước màn hình, độ phân giải và các yếu tố khác. Một số điều kiện phổ biến gồm:

• max-width: Giới hạn kiểu hiển thị cho màn hình có chiều rộng tối đa (ví dụ: max-width: 600px).
• min-width: Áp dụng kiểu hiển thị cho màn hình có chiều rộng tối thiểu (ví dụ: min-width: 768px).

• max-height: Giới hạn kiểu hiển thị cho màn hình có chiều cao tối đa (ví dụ: max-height: 400px).
• min-height: Áp dụng kiểu hiển thị cho màn hình có chiều cao tối thiểu (ví dụ: min-height: 500px).

Những điều kiện này giúp bạn kiểm soát giao diện trang web trên các thiết bị và hướng hiển thị khác nhau.

Ví dụ:

@media (max-width: 600px) {  
  body { background-color: lightblue; }  
}

@media (min-width: 601px) and (max-width: 1024px) {
  body {background-color: lightgreen;}

Điều này thay đổi màu nền thành lightblue khi chiều rộng màn hình từ 600px trở xuống. Với màn hình có chiều rộng từ 601px đến 1024px, màu nền sẽ là lightgreen.