User changes breakpoint

1
 webflow.subscribe(
2
  event: 'mediaquery',
3
  callback: (element: null | AnyElement) => void
4
): Unsubscribe;

1
/**
2
 * Subscribe to the 'mediaquery' event and get the Unsubscribe function.
3
 * This event notifies when the breakpoint changes in the Webflow Designer.
4
 * @param {BreakpointId} breakpoint - The current breakpoint ID ('xxl', 'xl', 'large', 'main', 'medium', 'small', 'tiny').
5
 */
6
const unsubscribeMediaQuery = webflow.subscribe("mediaquery", (breakpoint) => {
7
  switch (breakpoint) {
8
    case 'xxl':
9
      console.log("The current view is for very large screens or high-resolution monitors.");
10
      break;
11
    case 'xl':
12
      console.log("The current view is suitable for large desktop monitors.");
13
      break;
14
    case 'large':
15
      console.log("The current view fits standard desktop monitors.");
16
      break;
17
    case 'main':
18
      console.log("The current view is suitable for smaller desktops or large tablets.");
19
      break;
20
    case 'medium':
21
      console.log("The current view is suitable for tablets and some large phones.");
22
      break;
23
    case 'small':
24
      console.log("The current view is designed for larger mobile devices.");
25
      break;
26
    case 'tiny':
27
      console.log("The current view is for the smallest mobile devices.");
28
      break;
29
    default:
30
      console.log("Unknown breakpoint:", breakpoint);
31
  }
32
});
33
34
/**
35
 * Later, when you want to unsubscribe from the 'mediaquery' event:
36
 * @function
37
 */
38
unsubscribeMediaQuery();