CSS Media Query – Cách sử dụng Media Query trong CSS

CSS Media Query là một module của CSS3 và được định nghĩa bởi W3C. Nó được sử dụng để thích nghi với các điều kiện như độ phân giải màn hình (ví dụ: màn hình smartphone so với màn hình máy tính). Kỹ thuật media query lần đầu tiên được sử dụng trong CSS3 và trở thành đề xuất của W3C vào tháng 6 năm 2012.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

Tổng quan CSS Media Query

CSS Media Query cho phép bạn áp dụng các tính năng CSS chỉ khi các điều kiện được xác định là đúng. Điều này cho phép bạn tạo ra các thiết kế web linh hoạt, thích ứng với nhiều loại thiết bị khác nhau.

Media query có thể được sử dụng để kiểm tra các tính năng của thiết bị, chẳng hạn như chiều rộng và chiều cao của màn hình, hay kiểm tra điều kiện khác như độ phân giải và mật độ điểm ảnh.

Hướng dẫn CSS Media Query

Để sử dụng CSS Media Query, bạn phải bao gồm một khối CSS trong một @media rule. Ví dụ:

@media (max-width: 600px) {
  /* CSS code here */
}

Trong ví dụ này, các thuộc tính CSS trong khối sẽ chỉ được áp dụng nếu điều kiện (max-width: 600px) là đúng. Điều này có nghĩa là các thuộc tính CSS trong khối này sẽ chỉ được áp dụng khi chiều rộng của màn hình nhỏ hơn hoặc bằng 600px.

Ví dụ sử dụng CSS Media Query

Media query là một tính năng của CSS cho phép bạn áp dụng các kiểu khác nhau cho các thiết bị và màn hình khác nhau. Điều này rất hữu ích cho thiết kế web đáp ứng, nơi bạn muốn đảm bảo trang web của mình trông đẹp và hoạt động tốt trên mọi loại thiết bị.

Media query được sử dụng bằng cách sử dụng cú pháp @media. Cú pháp cơ bản của media query là:

@media media_type and (media_feature_expression) {
  /* Styles for this media type */
}

Trong đó:

• media_type là kiểu thiết bị hoặc màn hình mà bạn muốn áp dụng các kiểu. Ví dụ: “all” là tất cả các thiết bị, “screen” là màn hình, “print” là in ấn, và “speech” là đọc văn bản.
• media_feature_expression là một biểu thức xác định khi nào các kiểu được áp dụng. Ví dụ: “min-width: 320px” sẽ áp dụng các kiểu cho các thiết bị có chiều rộng tối thiểu là 320 pixel.

Ví dụ: sau đây là một media query sẽ áp dụng các kiểu cho các thiết bị có chiều rộng tối thiểu là 320 pixel:

@media (min-width: 320px) {
  .my-element {
    width: 100%;
  }
}

Trong ví dụ này, các kiểu được áp dụng cho tất cả các thiết bị có chiều rộng tối thiểu là 320 pixel. Các kiểu sẽ bao gồm việc đặt width của .my-element thành 100%.

Media query có thể được sử dụng để áp dụng các kiểu cho các thiết bị dựa trên các thuộc tính khác nhau, chẳng hạn như chiều cao, độ phân giải, hoặc hướng.

Dưới đây là một số ví dụ về cách sử dụng media query:

• Áp dụng các kiểu khác nhau cho màn hình và máy in.
• Tạo bố cục đáp ứng cho các thiết bị có kích thước màn hình khác nhau.
• Ẩn hoặc hiển thị các phần tử dựa trên kích thước màn hình.
• Điều chỉnh kích thước hoặc vị trí của các yếu tố dựa trên kích thước màn hình.

Media query là một công cụ mạnh mẽ có thể được sử dụng để cải thiện khả năng tiếp cận và khả năng sử dụng của trang web của bạn.

Ưu và Nhược điểm CSS Media Query

Ưu điểm:

• Cho phép tạo ra các thiết kế web thích ứng với nhiều loại thiết bị khác nhau.
• Giúp cải thiện trải nghiệm người dùng trên các thiết bị nhỏ hơn hoặc lớn hơn.

Nhược điểm:

• Tăng độ phức tạp của mã CSS và HTML của trang web.
• Đôi khi có thể dẫn đến hiệu suất kém trên các thiết bị di động.

Lời khuyên CSS Media Query

Khi sử dụng CSS Media Query, bạn nên tuân thủ các quy tắc sau để đảm bảo tính linh hoạt và hiệu quả của trang web:

• Sử dụng các thông số tiêu chuẩn khi xác định điều kiện media query.
• Kiểm tra thiết bị của người dùng để đảm bảo rằng các tùy chọn hiển thị phù hợp được áp dụng.
• Sử dụng các công cụ đánh giá và kiểm tra trang web để đảm bảo rằng trang của bạn hoạt động tốt trên nhiều thiết bị khác nhau.