webflow.getMediaQuery()
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.
![](https://files.readme.io/da44a35-Large_GIF_1252x618.gif)
Syntax
webflow.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
const breakpointId = await webflow.getMediaQuery();
switch (breakpointId) {
case 'xxl':
console.log("The current view is for very large screens or high-resolution monitors.");
break;
case 'xl':
console.log("The current view is suitable for large desktop monitors.");
break;
case 'large':
console.log("The current view fits standard desktop monitors.");
break;
case 'main':
console.log("The current view is suitable for smaller desktops or large tablets.");
break;
case 'medium':
console.log("The current view is suitable for tablets and some large phones.");
break;
case 'small':
console.log("The current view is designed for larger mobile devices.");
break;
case 'tiny':
console.log("The current view is for the smallest mobile devices.");
break;
}
}