Breakpoints in Blazor Media Query

14 Aug 20262 minutes to read

Blazor Media Query breakpoints let you build responsive and adaptive layouts by defining screen-size thresholds at which the layout and styling of the web application adjust for the best user experience.

Built-in breakpoints

You can customize the appearance of the application based on the screen size using the built-in breakpoints. The ActiveBreakPoint property gives the breakpoint that is currently matching the media query.

The built-in breakpoint values for the Media Query component are:

• Small — browser width ≤ 768 pixels
• Medium — browser width between 768 and 1024 pixels
• Large — browser width ≥ 1024 pixels

Modifying built-in breakpoints

You can modify the media query for a built-in breakpoint by setting the MediaQuery property of the corresponding MediaBreakpoint on SfMediaQuery (for example, SfMediaQuery.Small, SfMediaQuery.Medium, and SfMediaQuery.Large).

@using Syncfusion.Blazor

<SfMediaQuery @bind-ActiveBreakpoint="@activeBreakpoint"></SfMediaQuery>

<h3>The active breakpoint is @activeBreakpoint</h3>

@code {
    private string activeBreakpoint;

    protected override void OnInitialized()
    {
        SfMediaQuery.Small.MediaQuery = "(max-width: 500px)";
        SfMediaQuery.Medium.MediaQuery = "(min-width: 500px)";
        SfMediaQuery.Large.MediaQuery = "(min-width: 1600px)";
        base.OnInitialized();
    }
}

Custom media breakpoints

The Blazor Media Query component allows you to define custom media breakpoints by setting the MediaBreakpoints property to a list of MediaBreakpoint instances. Each MediaBreakpoint defines a Breakpoint label (the value reported through ActiveBreakPoint when matched) and a MediaQuery string. Make sure the custom ranges do not overlap so that exactly one breakpoint is active at any time.

@using Syncfusion.Blazor

<SfMediaQuery MediaBreakpoints="@mediaBreakPoint" @bind-ActiveBreakpoint="@activeBreakpoint"></SfMediaQuery>

<h3>The active breakpoint is @activeBreakpoint</h3>

@code {
    private string activeBreakpoint;
    private List<MediaBreakpoint> mediaBreakPoint = new List<MediaBreakpoint>();
    protected override void OnInitialized()
    {
        mediaBreakPoint = new List<MediaBreakpoint>() 
        {
            new MediaBreakpoint() { Breakpoint = "Mobile", MediaQuery = "(max-width: 600px)" },
            new MediaBreakpoint() { Breakpoint = "Tablet", MediaQuery = "(min-width: 600px) and (max-width: 999px)" },
            new MediaBreakpoint() { Breakpoint = "Laptop", MediaQuery = "(min-width: 1000px) and (max-width: 1199px)" },
            new MediaBreakpoint() { Breakpoint = "Desktop", MediaQuery = "(min-width: 1200px)" }
        };
        base.OnInitialized();
    }
}