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

Breakpoints and Media Queries

Table of Contents

• Understanding Built-in Breakpoints
• ActiveBreakpoint Property
• Modifying Built-in Breakpoints
• Creating Custom Breakpoints
• Common Breakpoint Scenarios

Understanding Built-in Breakpoints

The Blazor Media Query component includes three built-in breakpoints that match common device sizes:

These breakpoints use CSS media queries under the hood:

• Small: (max-width: 768px)
• Medium: (min-width: 768px) and (max-width: 1024px)
• Large: (min-width: 1024px)

ActiveBreakpoint Property

The ActiveBreakpoint property returns the name of the currently matching breakpoint as a string. Use two-way binding to track breakpoint changes:

@using Syncfusion.Blazor

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

<p>Active Breakpoint: <strong>@currentBreakpoint</strong></p>

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

The value updates automatically whenever the window resizes and crosses a breakpoint threshold. This enables real-time responsive behavior without page refreshes.

Modifying Built-in Breakpoints

Customize the default breakpoint values by modifying the media query strings. This is useful when your design requires different breakpoints than the built-in defaults.

@using Syncfusion.Blazor

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

<h3>The active breakpoint is @activeBreakpoint</h3>

@code {
    private string activeBreakpoint;

    protected override void OnInitialized()
    {
        // Customize breakpoint thresholds
        SfMediaQuery.Small.MediaQuery = "(max-width: 500px)";
        SfMediaQuery.Medium.MediaQuery = "(min-width: 500px) and (max-width: 1200px)";
        SfMediaQuery.Large.MediaQuery = "(min-width: 1200px)";
        
        base.OnInitialized();
    }
}

Common Customizations:

• Mobile-first: Adjust Small to (max-width: 480px)
• Tablet-focused: Set Medium to (min-width: 600px) and (max-width: 1000px)
• Large screens: Adjust Large to (min-width: 1920px)

Creating Custom Breakpoints

Define completely custom breakpoints by providing a list of MediaBreakpoint objects. This allows you to create breakpoints that match your specific design requirements.

@using Syncfusion.Blazor

<SfMediaQuery MediaBreakpoints="@customBreakpoints" 
              @bind-ActiveBreakPoint="activeBreakpoint">
</SfMediaQuery>

<h3>The active breakpoint is @activeBreakpoint</h3>

@code {
    private string activeBreakpoint;
    private List<MediaBreakpoint> customBreakpoints = new List<MediaBreakpoint>();

    protected override void OnInitialized()
    {
        customBreakpoints = new List<MediaBreakpoint>()
        {
            new MediaBreakpoint() 
            { 
                Breakpoint = "Mobile", 
                MediaQuery = "(max-width: 600px)" 
            },
            new MediaBreakpoint() 
            { 
                Breakpoint = "Tablet", 
                MediaQuery = "(min-width: 600px) and (max-width: 999px)" 
            },
            new MediaBreakpoint() 
            { 
                Breakpoint = "Laptop", 
                MediaQuery = "(min-width: 1000px) and (max-width: 1199px)" 
            },
            new MediaBreakpoint() 
            { 
                Breakpoint = "Desktop", 
                MediaQuery = "(min-width: 1200px)" 
            }
        };
        base.OnInitialized();
    }
}

MediaBreakpoint Properties:

• Breakpoint (string): The name returned by ActiveBreakpoint
• MediaQuery (string): A valid CSS media query string

Common Breakpoint Scenarios

Scenario 1: E-Commerce Mobile-First

new List<MediaBreakpoint>()
{
    new MediaBreakpoint() { Breakpoint = "Phone", MediaQuery = "(max-width: 480px)" },
    new MediaBreakpoint() { Breakpoint = "Tablet", MediaQuery = "(min-width: 481px) and (max-width: 768px)" },
    new MediaBreakpoint() { Breakpoint = "Desktop", MediaQuery = "(min-width: 769px)" }
}

Scenario 2: Four-Tier Responsive Design

new List<MediaBreakpoint>()
{
    new MediaBreakpoint() { Breakpoint = "XS", MediaQuery = "(max-width: 576px)" },
    new MediaBreakpoint() { Breakpoint = "SM", MediaQuery = "(min-width: 577px) and (max-width: 768px)" },
    new MediaBreakpoint() { Breakpoint = "MD", MediaQuery = "(min-width: 769px) and (max-width: 992px)" },
    new MediaBreakpoint() { Breakpoint = "LG", MediaQuery = "(min-width: 993px)" }
}

Scenario 3: High-Resolution Displays

new List<MediaBreakpoint>()
{
    new MediaBreakpoint() { Breakpoint = "Mobile", MediaQuery = "(max-width: 768px)" },
    new MediaBreakpoint() { Breakpoint = "Tablet", MediaQuery = "(min-width: 769px) and (max-width: 1024px)" },
    new MediaBreakpoint() { Breakpoint = "Desktop", MediaQuery = "(min-width: 1025px) and (max-width: 1920px)" },
    new MediaBreakpoint() { Breakpoint = "4K", MediaQuery = "(min-width: 1921px)" }
}

Best Practices

Media Query Syntax: Use valid CSS media queries. Ensure:

• Proper parentheses: (max-width: 768px)
• Logical operators: and, or, not
• No gaps between breakpoints (or use or for gaps)

Breakpoint Naming: Use clear, descriptive names:

• ✅ "Mobile", "Tablet", "Desktop"
• ✅ "Phone", "Pad", "Monitor"
• ❌ "Small", "Big", "Responsive"

Testing: Always test across all defined breakpoints to ensure smooth transitions and proper content visibility.

Component Integration and Global Patterns

Table of Contents

• Global Reuse with MainLayout
• Cascading Values and Parameters
• Data Grid Integration
• Multi-Component Responsive Patterns
• Best Practices
• Troubleshooting

Global Reuse with MainLayout

Wrap your entire application in Media Query using MainLayout.razor to provide responsive behavior to all pages without duplicating the component.

Step 1: Update MainLayout.razor

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>
    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>
        <article class="content px-4">
            <!-- Wrap Body in CascadingValue -->
            <CascadingValue Value="@activeBreakPoint">
                <SfMediaQuery @bind-ActiveBreakPoint="activeBreakPoint"></SfMediaQuery>
                @Body
            </CascadingValue>
        </article>
    </main>
</div>

@code {
    [Parameter]
    public string activeBreakPoint { get; set; }
}

Key Points:

• CascadingValue wraps the SfMediaQuery component
• @Body is inside the cascading value provider
• activeBreakPoint parameter cascades to all child components

Step 2: Use in Child Pages

<!-- Pages/Home.razor -->

@page "/"

<h1>Home Page</h1>
<p>Active Breakpoint: @activeBreakPoint</p>

@if (activeBreakPoint == "Small")
{
    <MobileHomeLayout />
}
else
{
    <DesktopHomeLayout />
}

@code {
    [CascadingParameter]
    public string activeBreakPoint { get; set; }
}

<!-- Pages/Counter.razor -->

@page "/counter"

<h1>Counter Page</h1>
<p>Breakpoint: @activeBreakPoint</p>

@code {
    [CascadingParameter]
    public string activeBreakPoint { get; set; }
}

Benefit: Every page automatically receives the current breakpoint without adding SfMediaQuery repeatedly.

Cascading Values and Parameters

Cascading values enable parent components to pass data to nested child components automatically.

Basic Pattern

<!-- Parent Component -->
<CascadingValue Value="@breakpoint">
    <Child />
    <AnotherChild />
</CascadingValue>

@code {
    private string breakpoint = "Large";
}

<!-- Child Component -->
@code {
    [CascadingParameter]
    public string breakpoint { get; set; }
}

Multiple Cascading Values

<!-- MainLayout.razor -->
<CascadingValue Value="@activeBreakPoint" Name="Breakpoint">
    <CascadingValue Value="@theme" Name="Theme">
        <SfMediaQuery @bind-ActiveBreakPoint="activeBreakPoint"></SfMediaQuery>
        @Body
    </CascadingValue>
</CascadingValue>

@code {
    private string activeBreakPoint { get; set; }
    private string theme = "light";
}

<!-- Child Component -->
@code {
    [CascadingParameter(Name = "Breakpoint")]
    public string Breakpoint { get; set; }
    
    [CascadingParameter(Name = "Theme")]
    public string Theme { get; set; }
}

Optional Cascading Parameters

@code {
    [CascadingParameter]
    public string Breakpoint { get; set; } = "Large"; // Default value
}

Data Grid Integration

Integrate Media Query with SfGrid for responsive table layouts.

Responsive Column Visibility

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Grids

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

<h3>Orders - Breakpoint: @breakpoint</h3>

<SfGrid DataSource="@orders" AllowSorting="true" AllowFiltering="true">
    <GridColumns>
        <!-- Always visible -->
        <GridColumn Field="@nameof(Order.OrderID)" HeaderText="Order ID" Width="80"></GridColumn>
        <GridColumn Field="@nameof(Order.CustomerID)" HeaderText="Customer"></GridColumn>
        
        <!-- Hidden on small screens -->
        @if (breakpoint != "Small")
        {
            <GridColumn Field="@nameof(Order.OrderDate)" HeaderText="Date" Format="d"></GridColumn>
            <GridColumn Field="@nameof(Order.ShipCity)" HeaderText="City"></GridColumn>
        }
        
        <!-- Hidden on small/medium screens -->
        @if (breakpoint == "Large")
        {
            <GridColumn Field="@nameof(Order.Amount)" HeaderText="Amount" Format="C2"></GridColumn>
        }
    </GridColumns>
</SfGrid>

@code {
    private string breakpoint { get; set; }
    private List<Order> orders { get; set; }

    protected override void OnInitialized()
    {
        orders = Enumerable.Range(1, 30).Select(x => new Order
        {
            OrderID = 1000 + x,
            CustomerID = "CUST" + x,
            OrderDate = DateTime.Now.AddDays(-x),
            ShipCity = "CityName",
            Amount = 100 + (x * 10)
        }).ToList();
    }

    public class Order
    {
        public int OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime OrderDate { get; set; }
        public string ShipCity { get; set; }
        public decimal Amount { get; set; }
    }
}

Adaptive Row Rendering

@{
    var renderingMode = RowDirection.Horizontal;
    var enableAdaptiveUI = false;

    if (breakpoint == "Small")
    {
        enableAdaptiveUI = true;
        renderingMode = RowDirection.Vertical;
    }
    else if (breakpoint == "Medium")
    {
        enableAdaptiveUI = true;
    }
}

<SfGrid DataSource="@orders" 
        EnableAdaptiveUI="@enableAdaptiveUI"
        RowRenderingMode="@renderingMode"
        AllowPaging="true">
    <GridPageSettings PageSize="@PageSize"></GridPageSettings>
    <!-- Columns definition -->
</SfGrid>

@code {
    private int PageSize => breakpoint == "Small" ? 5 : 10;
}

Multi-Component Responsive Patterns

Dashboard with Responsive Widget Layout

@using Syncfusion.Blazor

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

<div class="@DashboardClass">
    <div class="widget widget-large">Widget 1</div>
    @if (breakpoint != "Small")
    {
        <div class="widget @WidgetSizeClass">Widget 2</div>
        <div class="widget @WidgetSizeClass">Widget 3</div>
    }
</div>

@code {
    private string breakpoint { get; set; }
    
    private string DashboardClass => breakpoint switch
    {
        "Small" => "grid-1-column",
        "Medium" => "grid-2-columns",
        _ => "grid-3-columns"
    };
    
    private string WidgetSizeClass => breakpoint == "Medium" ? "widget-medium" : "widget-small";
}

<style>
    .grid-1-column { display: grid; grid-template-columns: 1fr; gap: 20px; }
    .grid-2-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .grid-3-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    
    .widget { padding: 20px; border: 1px solid #ddd; }
    .widget-large { grid-column: span 2; }
    .widget-medium { grid-column: span 1; }
    .widget-small { grid-column: span 1; }
</style>

Side-by-Side and Stacked Layouts

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

<div class="@LayoutClass">
    <aside class="sidebar">
        <SidebarContent />
    </aside>
    <main class="main-content">
        <MainContent />
    </main>
</div>

@code {
    private string bp { get; set; }
    
    private string LayoutClass => bp == "Small" ? "layout-stacked" : "layout-side-by-side";
}

<style>
    .layout-stacked {
        display: flex;
        flex-direction: column;
    }
    
    .layout-side-by-side {
        display: flex;
        flex-direction: row;
    }
    
    .layout-side-by-side .sidebar {
        width: 250px;
        margin-right: 20px;
    }
    
    .layout-side-by-side .main-content {
        flex: 1;
    }
</style>

Best Practices

Practice 1: Provide Default Breakpoint Values

Always initialize the breakpoint to prevent null reference exceptions:

private string activeBreakpoint { get; set; } = "Large";

Practice 2: Use Const for Breakpoint Names

Define breakpoint constants to avoid typos:

@code {
    private const string BP_SMALL = "Small";
    private const string BP_MEDIUM = "Medium";
    private const string BP_LARGE = "Large";
    
    @if (breakpoint == BP_SMALL) { }
}

Practice 3: Separate Layout Components

Create dedicated components for each breakpoint layout:

<!-- MobileLayout.razor -->
<div class="mobile-layout">Mobile specific UI</div>

<!-- DesktopLayout.razor -->
<div class="desktop-layout">Desktop specific UI</div>

<!-- Main component uses them -->
@if (breakpoint == "Small")
{
    <MobileLayout />
}
else
{
    <DesktopLayout />
}

Practice 4: Test Across Real Devices

Use browser dev tools to simulate different screen sizes, but also test on actual devices for real-world behavior.

Troubleshooting

Issue 1: Breakpoint Not Updating

Problem: ActiveBreakpoint shows initial value but doesn't change on resize.

Solution: Ensure two-way binding is correctly implemented:

<!-- Correct -->
<SfMediaQuery @bind-ActiveBreakPoint="breakpoint"></SfMediaQuery>

<!-- Wrong -->
<SfMediaQuery ActiveBreakPoint="@breakpoint"></SfMediaQuery>

Issue 2: CascadingParameter Not Received

Problem: Child component doesn't receive the cascading value.

Solution: Ensure the parameter name matches exactly:

<!-- Parent -->
<CascadingValue Value="@breakpoint">

<!-- Child - must match parameter name -->
[CascadingParameter]
public string breakpoint { get; set; }

Issue 3: Component Flicker on Resize

Problem: UI flickers when crossing breakpoint thresholds.

Solution: Use CSS transitions and avoid rapid component swaps:

<div style="transition: all 0.3s ease;">
    @if (breakpoint == "Small")
    {
        <MobileView />
    }
    else
    {
        <DesktopView />
    }
</div>

Issue 4: Performance Issues with Heavy Components

Problem: Rendering multiple heavy components for each breakpoint causes lag.

Solution: Use lazy loading or conditional rendering:

<!-- Bad - renders all layouts -->
<MobileLayout />
<DesktopLayout />

<!-- Good - renders only needed layout -->
@if (breakpoint == "Small")
{
    <MobileLayout />
}
else
{
    <DesktopLayout />
}

Issue 5: SSR Compatibility

Problem: Media Query doesn't work on initial server-side render.

Solution: Add @rendermode="InteractiveServer" to App.razor (Blazor 8+):

<!-- ~/Components/App.razor -->
<body>
    <Routes @rendermode="InteractiveServer" />
</body>

This enables client-side interactivity where Media Query can detect viewport size.

Getting Started with Blazor Media Query

Table of Contents

• NuGet Installation
• Namespace Imports
• Service Registration
• Theme Stylesheet
• Basic Component Usage

NuGet Installation

Install the Syncfusion.Blazor.Core and Syncfusion.Blazor.Themes packages using your preferred method.

Visual Studio Package Manager

Install-Package Syncfusion.Blazor.Core
Install-Package Syncfusion.Blazor.Themes

.NET CLI

dotnet add package Syncfusion.Blazor.Core
dotnet add package Syncfusion.Blazor.Themes
dotnet restore

Visual Studio Code Terminal

dotnet add package Syncfusion.Blazor.Core
dotnet add package Syncfusion.Blazor.Themes
dotnet restore

Namespace Imports

Open the ~/_Imports.razor file and add the Syncfusion.Blazor namespace:

@using Syncfusion.Blazor

This imports all Syncfusion Blazor components including SfMediaQuery.

Service Registration

Register the Syncfusion Blazor Service in the ~/Program.cs file:

using Syncfusion.Blazor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient 
{ 
    BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) 
});

// Register Syncfusion Blazor Service
builder.Services.AddSyncfusionBlazor();

await builder.Build().RunAsync();

Theme Stylesheet

Include the Syncfusion theme stylesheet in the <head> section of ~/index.html:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blazor App</title>
    <base href="/" />
    
    <!-- Syncfusion Theme -->
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>

Available themes: bootstrap5.css, material3.css, tailwind.css, fluent2.css, highcontrast.css

Basic Component Usage

Add the Media Query component to a Razor page to detect and respond to screen size changes:

@using Syncfusion.Blazor

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

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

@if (activeBreakpoint == "Small")
{
    <p>Mobile Device (≤768px)</p>
}
else if (activeBreakpoint == "Medium")
{
    <p>Tablet (768px - 1024px)</p>
}
else
{
    <p>Desktop (>1024px)</p>
}

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

The @bind-ActiveBreakPoint directive binds the current breakpoint to the activeBreakpoint variable. This variable updates automatically whenever the window resizes and crosses a breakpoint threshold.

Test It: Resize your browser window and watch the displayed message change as you cross breakpoint boundaries.

Responsive Layout Patterns

Table of Contents

• Conditional Rendering
• Dynamic Property Binding
• Layout Adaptation Strategies
• CSS Class Switching
• Performance Optimization
• Common Pitfalls

Conditional Rendering

Render different content based on the current breakpoint. This is the most common responsive pattern.

Simple If-Else Pattern

@using Syncfusion.Blazor

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

@if (breakpoint == "Small")
{
    <MobileView />
}
else if (breakpoint == "Medium")
{
    <TabletView />
}
else
{
    <DesktopView />
}

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

Show/Hide Components

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

<header>
    @if (bp == "Small")
    {
        <button @onclick="ToggleSidebar">☰ Menu</button>
    }
    else
    {
        <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
            <a href="/contact">Contact</a>
        </nav>
    }
</header>

@code {
    private string bp { get; set; }
    
    private void ToggleSidebar() 
    { 
        // Toggle sidebar implementation
    }
}

Grid Layout Adaptation

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

<div class="@GridClass">
    @for (int i = 0; i < 12; i++)
    {
        <div class="grid-item">Item @(i + 1)</div>
    }
</div>

@code {
    private string bp { get; set; }
    
    private string GridClass => bp switch
    {
        "Small" => "grid-1-column",
        "Medium" => "grid-2-columns",
        _ => "grid-3-columns"
    };
}

<style>
    .grid-1-column { display: grid; grid-template-columns: 1fr; }
    .grid-2-columns { display: grid; grid-template-columns: repeat(2, 1fr); }
    .grid-3-columns { display: grid; grid-template-columns: repeat(3, 1fr); }
</style>

Dynamic Property Binding

Adjust component properties based on the breakpoint to optimize behavior for each device type.

Data Grid Responsiveness

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Grids

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

<h3>Active Breakpoint: @breakpoint</h3>

@{
    var pageSize = breakpoint == "Small" ? 5 : (breakpoint == "Medium" ? 10 : 25);
    var allowPaging = breakpoint != "Small";
    var enableAdaptiveUI = breakpoint != "Large";
}

<SfGrid DataSource="@orders" 
        EnableAdaptiveUI="@enableAdaptiveUI"
        AllowPaging="@allowPaging">
    <GridPageSettings PageSize="@pageSize"></GridPageSettings>
    <GridColumns>
        <GridColumn Field="@nameof(Order.OrderID)" HeaderText="ID" Width="80"></GridColumn>
        <GridColumn Field="@nameof(Order.CustomerID)" HeaderText="Customer"></GridColumn>
        <GridColumn Field="@nameof(Order.OrderDate)" HeaderText="Date" Format="d"></GridColumn>
        <GridColumn Field="@nameof(Order.Amount)" HeaderText="Amount" Format="C2"></GridColumn>
    </GridColumns>
</SfGrid>

@code {
    private string breakpoint { get; set; }
    private List<Order> orders { get; set; } = new();

    protected override void OnInitialized()
    {
        orders = Enumerable.Range(1, 50).Select(x => new Order
        {
            OrderID = 1000 + x,
            CustomerID = "CUST" + x,
            OrderDate = DateTime.Now.AddDays(-x),
            Amount = 100 + (x * 10)
        }).ToList();
    }

    public class Order
    {
        public int OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime OrderDate { get; set; }
        public decimal Amount { get; set; }
    }
}

List View with Variable Items Per Row

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

<div class="item-list" style="columns: @ColumnCount">
    @foreach (var item in items)
    {
        <div class="item-card">@item</div>
    }
</div>

@code {
    private string bp { get; set; }
    private List<string> items = Enumerable.Range(1, 20)
        .Select(i => $"Item {i}").ToList();
    
    private int ColumnCount => bp switch
    {
        "Small" => 1,
        "Medium" => 2,
        _ => 3
    };
}

Layout Adaptation Strategies

Strategy 1: Mobile-First Approach

Start with mobile layout, then enhance for larger screens:

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

<div class="container">
    <aside class="sidebar">
        @if (bp != "Small")
        {
            <SidebarContent />
        }
    </aside>
    <main class="content">
        <MainContent />
    </main>
</div>

<style>
    .container {
        display: flex;
        flex-direction: column;
    }
    
    /* Mobile (Small) - sidebar hidden by default */
    
    /* Tablet and up */
    @media (min-width: 769px) {
        .container {
            flex-direction: row;
        }
        .sidebar {
            width: 250px;
        }
    }
</style>

Strategy 2: Content Reflow

Rearrange content order based on screen size:

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

<div class="@(bp == "Small" ? "flex-column" : "flex-row")">
    <section class="hero">Hero Section</section>
    <section class="features">Features Section</section>
    <section class="testimonials">Testimonials Section</section>
</div>

<style>
    .flex-column { display: flex; flex-direction: column; }
    .flex-row { display: flex; flex-direction: row; }
</style>

Strategy 3: Conditional Rendering with Fallback

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

<div class="dashboard">
    @if (bp == "Small")
    {
        <Stack Direction="StackDirection.Vertical" Spacing="10">
            <Widget1 />
            <Widget2 />
            <Widget3 />
        </Stack>
    }
    else if (bp == "Medium")
    {
        <Grid Columns="2">
            <Widget1 />
            <Widget2 />
            <Widget3 />
        </Grid>
    }
    else
    {
        <Grid Columns="3">
            <Widget1 />
            <Widget2 />
            <Widget3 />
        </Grid>
    }
</div>

CSS Class Switching

Combine ActiveBreakpoint with CSS classes for styling-based responsive design:

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

<div class="responsive-container @bp">
    <h1>Responsive Heading</h1>
    <p>This content adapts via CSS classes.</p>
</div>

<style>
    .responsive-container {
        padding: 20px;
        font-size: 14px;
    }
    
    .responsive-container.Medium {
        padding: 30px;
        font-size: 16px;
    }
    
    .responsive-container.Large {
        padding: 50px;
        font-size: 18px;
    }
</style>

Performance Optimization

Tip 1: Minimize Re-renders

Cache computed breakpoint-dependent values:

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

@if (ShouldShowSidebar)
{
    <Sidebar />
}

@code {
    private string bp { get; set; }
    
    private bool ShouldShowSidebar => bp != "Small";
}

Tip 2: Debounce Breakpoint Changes

Media Query fires on every pixel change. Implement debouncing if expensive operations occur:

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

@code {
    private string bp { get; set; }
    private string prevBreakpoint { get; set; }
    
    protected override void OnParametersSet()
    {
        if (bp != prevBreakpoint)
        {
            HandleBreakpointChange(bp);
            prevBreakpoint = bp;
        }
    }
    
    private void HandleBreakpointChange(string newBreakpoint)
    {
        // Expensive operation here (API calls, etc.)
    }
}

Tip 3: Use StateHasChanged Sparingly

Let two-way binding handle updates. Only call StateHasChanged() if needed:

// ❌ Avoid - unnecessary re-render
<SfMediaQuery @bind-ActiveBreakPoint="bp" 
              ActiveBreakPointChanged="OnBreakpointChanged">
</SfMediaQuery>

private void OnBreakpointChanged(string newBreakpoint)
{
    StateHasChanged(); // Usually not needed
}

// ✅ Prefer - let binding handle it
<SfMediaQuery @bind-ActiveBreakPoint="bp"></SfMediaQuery>

Common Pitfalls

Pitfall 1: Hardcoded Breakpoint Values

// ❌ Bad - breakpoint name is hardcoded
@if (breakpoint == "Small")

// ✅ Good - use constants
private const string SMALL_BP = "Small";

@if (breakpoint == SMALL_BP)

Pitfall 2: Missing Initialization

// ❌ Bad - breakpoint might be null initially
@if (breakpoint == "Small") { }

// ✅ Good - provide default value
private string breakpoint = "Large";

Pitfall 3: Too Many Breakpoints

// ❌ Bad - 6+ breakpoints create maintenance overhead
new List<MediaBreakpoint>() { ... 10 items ... }

// ✅ Good - 3-4 breakpoints cover most scenarios
new List<MediaBreakpoint>() { Mobile, Tablet, Desktop }

Pitfall 4: Blocking Render in Handler

// ❌ Bad - async operation blocks render
private async Task OnBreakpointChanged(string bp)
{
    await FetchData(); // Blocks UI
}

// ✅ Good - fire-and-forget pattern
private void OnBreakpointChanged(string bp)
{
    _ = Task.Run(() => FetchData()); // Non-blocking
}