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

Overview

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 media breakpoints

The Blazor Media Query component comes with predefined breakpoints:

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

Custom media breakpoints

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


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.
}
else
{
    // Add the layout for screen width of 768 pixels or less.
}

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

Blazor Components – 80+ 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

Awards

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

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile