Media Query API

// Check if mobile
const isMobile = window.matchMedia('(max-width: 768px)').matches;

if (isMobile) {
  console.log('User is on mobile');
  // Load mobile-specific features
  loadMobileMenu();
} else {
  console.log('User is on desktop');
  // Load desktop features
  loadDesktopMenu();
}

// Listen for changes (window resize)
const mediaQuery = window.matchMedia('(max-width: 768px)');

mediaQuery.addEventListener('change', (e) => {
  if (e.matches) {
    console.log('Switched to mobile');
    loadMobileMenu();
  } else {
    console.log('Switched to desktop');
    loadDesktopMenu();
  }
});

// 🎯 Responsive behavior in JavaScript!

// Check if user prefers dark mode
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

if (prefersDark) {
  console.log('User prefers dark mode');
  document.body.classList.add('dark-theme');
} else {
  console.log('User prefers light mode');
  document.body.classList.add('light-theme');
}

// Listen for changes (system theme switch)
const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');

darkModeQuery.addEventListener('change', (e) => {
  if (e.matches) {
    console.log('Switched to dark mode');
    document.body.classList.remove('light-theme');
    document.body.classList.add('dark-theme');
  } else {
    console.log('Switched to light mode');
    document.body.classList.remove('dark-theme');
    document.body.classList.add('light-theme');
  }
});

// 🎯 Respect system preferences!