We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted Companies


The Blazor Media Query component helps you build responsive, adaptable layouts for your web applications. It detects changes in the browser’s size and adjusts your layouts accordingly, ensuring that your applications look great and function well on a wide range of devices and screen sizes. It provides an optimal user experience no matter the type of device used.

Blazor Media Query component

Predefined & custom media breakpoints

The Blazor Media Query component comes with predefined breakpoints and also, allows users to define custom breakpoints & media queries, giving them flexibility to customize the appearance of the web application to suit their unique needs.

Predefined breakpoints:

  • Small: browser width <= 768 pixels
  • Medium: browser width between 768 and 1024 pixels
  • Large: browser width >= 1024 pixels

Blazor Media Query breakpoints

Blazor Media Query component code example

Easily get started with the Blazor Media Query using a few simple lines of C# code example as demonstrated below. Also explore our Blazor Media Query example that shows you how to render and configure the Blazor Media Query.

@using Syncfusion.Blazor

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

@if (activeBreakpoint == "Large")
    // Add the layout for screen width of 1024 pixels or more.
else if (activeBreakpoint == "Medium")
    // Add the layout for screen width between 768 and 1024 pixels.
    // Add the layout for screen width of 768 pixels or less.

@code {
    private string activeBreakpoint { get; set; }

Struggling to decide on the right product?

Our comprehensive competitor comparison of Blazor components will guide you to the perfect choice.

tick-mark 85+ UI components
tick-mark 960+ interactive Blazor demos
tick-mark 1.8M+ downloads

Blazor Components – 85+ UI and DataViz Components

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion reduces customers’ development time.
Here are some of their experiences.

Rated by users across the globe

Transform your applications today by downloading our free evaluation version
Download Free Trial No credit card required.


Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.

Up arrow icon
Live Chat Icon For mobile