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

webflow.getMediaQuery(): Promise<BreakpointId>

Returns

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;
  }
}