Syncfusion Blazor Media Query

Syncfusion Blazor Media Query

The Syncfusion Blazor Media Query component detects the current screen size and triggers layout changes based on defined breakpoints. This enables you to build responsive, adaptive applications that provide optimal user experiences across all device sizes.

When to Use This Skill

Use this skill when you need to:

• Build responsive layouts that adapt to different screen sizes (mobile, tablet, desktop)
• Conditionally render components based on the current device breakpoint
• Apply dynamic styling based on screen width
• Integrate Media Query with other Syncfusion components (Data Grid, Charts, etc.)
• Create reusable responsive patterns across multiple pages using cascading values

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• NuGet package installation (Visual Studio, VSCode, .NET CLI)
• Namespace imports and service registration
• Theme stylesheet configuration
• First component implementation

Breakpoints and Media Queries

📄 Read: references/breakpoints-and-media-queries.md

• Understanding built-in breakpoints (Small, Medium, Large)
• ActiveBreakpoint property binding
• Modifying built-in breakpoints
• Creating custom media breakpoints

Responsive Layout Patterns

📄 Read: references/responsive-layout-patterns.md

• Binding to ActiveBreakpoint property
• Conditional rendering based on screen size
• Dynamic property adjustment patterns
• Layout adaptation strategies

Component Integration

📄 Read: references/component-integration.md

• Global component reuse with MainLayout.razor
• Cascading values and parameters
• Integration with Data Grid for responsive tables
• Best practices for multi-component layouts

Quick Start Example

@using Syncfusion.Blazor

<SfMediaQuery @bind-ActiveBreakPoint="currentBreakpoint"></SfMediaQuery>

<h3>Current Breakpoint: @currentBreakpoint</h3>

@if (currentBreakpoint == "Small")
{
    <p>You are viewing on a mobile device</p>
}
else if (currentBreakpoint == "Medium")
{
    <p>You are viewing on a tablet</p>
}
else
{
    <p>You are viewing on a desktop</p>
}

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

Common Use Cases

1. Responsive Data Grid

Hide or show columns based on screen size, adjust row rendering mode:

Small → Vertical row layout, hide non-essential columns
Medium → Adaptive mode enabled
Large → Horizontal layout, all columns visible

2. Responsive Navigation

Show full navigation on desktop, hamburger menu on mobile:

Small → Collapse navigation to hamburger menu
Large → Show full navigation bar

3. Multi-Column Layouts

Adjust grid layout based on available space:

Small → 1-column layout
Medium → 2-column layout
Large → 3-column layout

4. Global App Responsiveness

Wrap entire application in MainLayout.razor with cascading Media Query:

MainLayout → Provides activeBreakpoint to all pages
Child Pages → Use CascadingParameter to access breakpoint
Result → Entire app responds to screen size changes

Key Properties

Common Patterns

Pattern 1: Simple Conditional Rendering

<SfMediaQuery @bind-ActiveBreakPoint="bp"></SfMediaQuery>

@if (bp == "Small")
{
    <MobileLayout />
}
else if (bp == "Medium")
{
    <TabletLayout />
}
else
{
    <DesktopLayout />
}

Pattern 2: Dynamic Component Properties

<SfMediaQuery @bind-ActiveBreakPoint="bp"></SfMediaQuery>

@{
    var pageSize = bp == "Small" ? 10 : 25;
    var allowPaging = bp != "Small";
}

<SfGrid PageSettings="@new GridPageSettings { PageSize = pageSize }">
    ...
</SfGrid>

Pattern 3: Responsive Navigation

<SfMediaQuery @bind-ActiveBreakPoint="bp"></SfMediaQuery>

@if (bp == "Small")
{
    <button @onclick="ToggleMenu">☰ Menu</button>
}
else
{
    <nav>Full Navigation Bar</nav>
}