Giới Thiệu

Trong phát triển web, việc áp dụng các kiểu dáng (styles) một cách linh hoạt trên các thiết bị khác nhau là rất quan trọng. CSS Media Query là một công cụ mạnh mẽ giúp chúng ta thực hiện điều này. Bài viết này sẽ khám phá cách sử dụng Media Query CSS trong Javascript thông qua phương thức matchMedia.

Giới thiệu về matchMedia

matchMedia là một phương thức có sẵn trên đối tượng window trong Javascript, cho phép chúng ta theo dõi hoặc khớp một Media Query CSS trên tài liệu. Bạn có thể tìm hiểu thêm về nó trên MDN.

Cú Pháp

Để sử dụng matchMedia, bạn cần cú pháp như sau:

javascript Copy

const matchMobileQuery = window.matchMedia("(max-width: 480px)");

Ví dụ: Giả sử bạn có một Media Query như sau:

css Copy

@media (max-width: 480px) {
  body {
    font-size: 16px;
    background-color: lightgray;
  }
}

Khi bạn kiểm tra trong console của trình duyệt, bạn có thể kiểm tra giá trị của matches để biết liệu truy vấn đã khớp hay chưa.

Theo Dõi Media Query

Để theo dõi một Media Query, bạn có thể thêm một trình lắng nghe sự kiện change trên đối tượng MediaQueryList mà matchMedia cung cấp. Dưới đây là một ví dụ sử dụng prefers-color-scheme:

javascript Copy

const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

function handleChange(e) {
  if (e.matches) {
    console.log('Chế độ tối');
  } else {
    console.log('Chế độ sáng');
  }
}

mediaQuery.addEventListener('change', handleChange);

Khi chế độ màu thay đổi, bạn sẽ thấy log trên console. Điều này cực kỳ hữu ích để áp dụng các kiểu dáng khác nhau cho chế độ tối và sáng.

Khi Nào Nên Sử Dụng?

Dưới đây là một số trường hợp bạn nên sử dụng matchMedia:

Thay thế window.innerWidth để xác định thiết bị đang sử dụng.
Thay thế việc theo dõi kích thước phần tử bằng resizeObserver, nếu có thể giải quyết bằng Media Query.
Không chỉ dành cho kích thước màn hình—sử dụng nó để phản ứng với chế độ tối, định hướng thiết bị và nhiều hơn nữa.

Thực Hành Tốt

Sử dụng Media Queries một cách hợp lý: Đảm bảo rằng bạn không lạm dụng Media Queries, vì điều này có thể làm cho mã của bạn trở nên khó bảo trì.
Kiểm tra trên nhiều thiết bị: Luôn luôn kiểm tra ứng dụng của bạn trên nhiều thiết bị và trình duyệt để đảm bảo hiệu suất tốt nhất.
Sử dụng các biến CSS: Kết hợp CSS variables với Media Queries để dễ dàng thay đổi các thuộc tính mà không cần viết lại mã.

Cạm Bẫy Thường Gặp

Không kiểm tra đủ: Một trong những cạm bẫy lớn nhất là không kiểm tra ứng dụng trên đa dạng thiết bị. Phải luôn đảm bảo rằng ứng dụng hoạt động tốt trên tất cả các thiết bị.
Lạm dụng Media Queries: Quá nhiều Media Queries có thể dẫn đến việc mã trở nên phức tạp và khó bảo trì. Hãy sử dụng chúng một cách có chọn lọc.

Mẹo Tối Ưu Hiệu Suất

Sử dụng debounce: Khi theo dõi các thay đổi, sử dụng phương thức debounce để giảm thiểu số lần gọi hàm trong một khoảng thời gian ngắn.
Tối ưu hóa CSS: Đảm bảo rằng bạn không có nhiều quy tắc CSS tương tự nhau. Sử dụng kế thừa và nhóm các quy tắc để giảm thiểu kích thước tệp CSS.

Giải Quyết Vấn Đề

Vấn đề không nhận diện Media Query: Nếu bạn gặp khó khăn trong việc nhận diện Media Query, hãy kiểm tra lại cú pháp và đảm bảo rằng bạn đã sử dụng chính xác phương thức matchMedia.
Sự kiện không hoạt động: Nếu lắng nghe sự kiện change không hoạt động, hãy đảm bảo rằng bạn đã đăng ký đúng cách và kiểm tra xem Media Query có thay đổi hay không.

Câu Hỏi Thường Gặp

Q: matchMedia có tương thích với tất cả các trình duyệt không?
A: matchMedia được hỗ trợ trên hầu hết các trình duyệt hiện đại, nhưng bạn nên kiểm tra trang Can I Use để biết thêm thông tin.

Q: Tôi có thể sử dụng matchMedia cho các thiết bị không phải di động không?
A: Có, matchMedia có thể được sử dụng cho bất kỳ loại thiết bị nào miễn là bạn định nghĩa được Media Query phù hợp.

Kết Luận

Media Query trong Javascript thông qua matchMedia là một công cụ hữu ích cho các nhà phát triển web, giúp tạo ra trải nghiệm người dùng tốt hơn trên nhiều thiết bị. Hãy thử áp dụng những kiến thức trong bài viết này vào dự án của bạn! Nếu bạn có ý kiến hoặc câu hỏi nào, hãy để lại trong phần bình luận dưới đây!

Cảm ơn bạn đã đọc!

Sử Dụng Media Query CSS Trong Javascript