Get the current breakpoint

webflow.getMediaQuery()

Retrieves the current breakpoint setting in the Designer. Webflow’s built-in responsive breakpoints - also known as media queries - allow users to customize site designs for different screen sizes. Knowing the current breakpoint can help your app build responsive content that’s applicable to different screen sizes and contexts.

Syntax

1webflow.getMediaQuery(): Promise<BreakpointId>

Returns

Promise<BreakpointID >:"xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny" - Identifier for the breakpoint size, also known as media query, in the designer.

A Promise that resolves to the value of the Breakpoint ID.

Example

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}