MediaQuery Overview

Updated on Jan 27, 2026

The MediaQuery component for Blazor allows you to react when the user changes the size of the browser.

Creating Blazor MediaQuery

To use the TelerikMediaQuery on your page:

1. Add the <TelerikMediaQuery> tag to your razor page.
2. Set the Media parameter to a CSS media query to be matched. Use one component instance for each media query.
3. Use the OnChange event to determine when the Media is matched.

@* Resize a container based on the browser size *@

<TelerikMediaQuery Media="@SmallScreenMediaQuery" OnChange="@((doesMatch) => IsSmallScreen = doesMatch)"></TelerikMediaQuery>
<TelerikMediaQuery Media="@LargeScreenMediaQuery" OnChange="@((doesMatch) => isLarge = doesMatch)"></TelerikMediaQuery>

<div style="width:@GetContainerWidth(); height: 400px; border: 1px solid black">
    Shrink the browser to resize the container.
</div>


@code {
    private bool IsSmallScreen { get; set; }
    private bool isLarge { get; set; }

    private string SmallScreenMediaQuery { get; set; } = "(max-width: 767px)";
    private string LargeScreenMediaQuery { get; set; } = "(min-width: 1199px)";

    private string GetContainerWidth()
    {
        string width = "900px";

        if (IsSmallScreen)
        {
            width = "500px";
        }
        if (isLarge)
        {
            width = "100%";
        }

        return width;
    }
} 

MediaQuery Parameters

Parameter	Type	Description
Media	string	The media query string that will be matched.

Notes

The MediaQuery component facilitates the usage of CSS media queries in your C# code:

• The MediaQuery component makes it easy to use C# logic based on the matched media query breakpoints. For example, you can change parameter values, replace a component with a different component or even not render parts of the layout. With CSS alone you can resize parts of the app or hide them visually, but they still render.
• The MediaQuery component is not designed as a full replacement for responsive design, layout and CSS. You should use them to create your responsive application layouts like with any other web application.

Next Steps

• Explore the MediaQuery events
• Integrate the MediaQuery with other Telerik Blazor components

See Also

• Live Demo: MediaQuery
• Live Demo: MediaQuery - Grid Integration
• MediaQuery API Reference