1
// 检测是否是移动端
2
const isMobile = window.matchMedia('(max-width: 768px)');
3

4
if (isMobile.matches) {
5
  console.log('当前是移动端视图');
6
} else {
7
  console.log('当前是桌面端视图');
8
}

1
const mediaQuery = window.matchMedia('(max-width: 768px)');
2

3
// 监听变化
4
mediaQuery.addEventListener('change', (e) => {
5
  if (e.matches) {
6
    console.log('切换到移动端视图');
7
  } else {
8
    console.log('切换到桌面端视图');
9
  }
10
});

1
const darkMode = window.matchMedia('(prefers-color-scheme: dark)');
2

3
// 初始检测
4
if (darkMode.matches) {
5
  document.body.classList.add('dark-theme');
6
}
7

8
// 监听系统主题变化
9
darkMode.addEventListener('change', (e) => {
10
  if (e.matches) {
11
    document.body.classList.add('dark-theme');
12
  } else {
13
    document.body.classList.remove('dark-theme');
14
  }
15
});

1
// 检测高分辨率屏幕
2
const isRetina = window.matchMedia('(min-resolution: 2dppx)');
3

4
// 检测屏幕方向
5
const isLandscape = window.matchMedia('(orientation: landscape)');
6

7
// 检测触摸设备
8
const hasTouch = window.matchMedia('(pointer: coarse)');
9

10
// 检测打印模式
11
const isPrint = window.matchMedia('print');

1
// 组合多个条件
2
const isTablet = window.matchMedia(
3
  '(min-width: 768px) and (max-width: 1024px) and (orientation: portrait)'
4
);
5

6
// 使用 CSS4 媒体查询
7
const hasHover = window.matchMedia('(hover: hover)');
8
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');

1
class ResponsiveComponent {
2
  constructor() {
3
    this.desktop = window.matchMedia('(min-width: 1024px)');
4
    this.tablet = window.matchMedia('(min-width: 768px) and (max-width: 1023px)');
5
    this.mobile = window.matchMedia('(max-width: 767px)');
6

7
    this.init();
8
    this.addListeners();
9
  }
10

11
  init() {
12
    if (this.desktop.matches) {
13
      this.loadDesktopFeatures();
14
    } else if (this.tablet.matches) {
15
      this.loadTabletFeatures();
16
    } else {
17
      this.loadMobileFeatures();
18
    }
19
  }
20

21
  addListeners() {
22
    this.desktop.addEventListener('change', () => this.init());
23
    this.tablet.addEventListener('change', () => this.init());
24
    this.mobile.addEventListener('change', () => this.init());
25
  }
26

27
  loadDesktopFeatures() {
28
    console.log('加载桌面端功能');
29
    // 加载复杂的可视化组件、大图等
30
  }
31

32
  loadTabletFeatures() {
33
    console.log('加载平板功能');
34
    // 加载适合平板的中等复杂度功能
35
  }
36

37
  loadMobileFeatures() {
38
    console.log('加载移动端功能');
39
    // 加载轻量级组件
40
  }
41
}
42

43
// 使用
44
const app = new ResponsiveComponent();

1
// 自定义 Hook
2
function useMediaQuery(query) {
3
  const [matches, setMatches] = React.useState(
4
    () => window.matchMedia(query).matches
5
  );
6

7
  React.useEffect(() => {
8
    const mediaQuery = window.matchMedia(query);
9
    const handler = (e) => setMatches(e.matches);
10

11
    // 立即检查
12
    setMatches(mediaQuery.matches);
13

14
    // 添加监听
15
    mediaQuery.addEventListener('change', handler);
16

17
    // 清理
18
    return () => mediaQuery.removeEventListener('change', handler);
19
  }, [query]);
20

21
  return matches;
22
}
23

24
// 使用示例
25
function App() {
26
  const isMobile = useMediaQuery('(max-width: 768px)');
27
  const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
28

29
  return (
30
    <div className={isDarkMode ? 'dark-theme' : 'light-theme'}>
31
      {isMobile ? <MobileNav /> : <DesktopNav />}
32
    </div>
33
  );
34
}

1
// 自定义组合式函数
2
import { ref, onMounted, onUnmounted } from 'vue';
3

4
export function useMediaQuery(query) {
5
  const matches = ref(false);
6
  let mediaQuery = null;
7

8
  const updateMatches = (e) => {
9
    matches.value = e.matches;
10
  };
11

12
  onMounted(() => {
13
    mediaQuery = window.matchMedia(query);
14
    matches.value = mediaQuery.matches;
15
    mediaQuery.addEventListener('change', updateMatches);
16
  });
17

18
  onUnmounted(() => {
19
    if (mediaQuery) {
20
      mediaQuery.removeEventListener('change', updateMatches);
21
    }
22
  });
23

24
  return matches;
25
}
26

27
// 使用示例
28
export default {
29
  setup() {
30
    const isMobile = useMediaQuery('(max-width: 768px)');
31
    const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
32

33
    return {
34
      isMobile,
35
      isDarkMode
36
    };
37
  }
38
};

1
// IE10 兼容性处理
2
function addMediaQueryListener(mq, callback) {
3
  if (mq.addEventListener) {
4
    mq.addEventListener('change', callback);
5
  } else if (mq.addListener) {
6
    // IE10 兼容
7
    mq.addListener(callback);
8
  }
9
}
10

11
// 移除监听器
12
function removeMediaQueryListener(mq, callback) {
13
  if (mq.removeEventListener) {
14
    mq.removeEventListener('change', callback);
15
  } else if (mq.removeListener) {
16
    // IE10 兼容
17
    mq.removeListener(callback);
18
  }
19
}