Get the current breakpoint

1
webflow.getMediaQuery(): Promise<BreakpointId>

1
const breakpointId = await webflow.getMediaQuery();
2
3
  switch (breakpointId) {
4
    case 'xxl':
5
      console.log("The current view is for very large screens or high-resolution monitors.");
6
      break;
7
    case 'xl':
8
      console.log("The current view is suitable for large desktop monitors.");
9
      break;
10
    case 'large':
11
      console.log("The current view fits standard desktop monitors.");
12
      break;
13
    case 'main':
14
      console.log("The current view is suitable for smaller desktops or large tablets.");
15
      break;
16
    case 'medium':
17
      console.log("The current view is suitable for tablets and some large phones.");
18
      break;
19
    case 'small':
20
      console.log("The current view is designed for larger mobile devices.");
21
      break;
22
    case 'tiny':
23
      console.log("The current view is for the smallest mobile devices.");
24
      break;
25
  }
26
}