Blazor Media Query Component

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.

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