Blazor MediaQuery

Respond to browser viewport size changes using CSS media queries. Perfect for responsive Blazor apps.

Basic Usage Link to this section

Use the Query parameter to specify a CSS media query and the Change event to respond when the query matches or stops matching.

Current viewport status:

Desktop View (> 768px)

Resize your browser window to see the media query in action.

Conditionally display different content for mobile and desktop viewports using media queries.

Desktop Navigation:

Use multiple RadzenMediaQuery components to respond to different screen sizes and create complex responsive layouts.

Current Breakpoint: lg

XS Extra Small: ≤ 576px

SM Small: 577px - 768px

MD Medium: 769px - 1024px

LG Large: ≥ 1025px

Resize your browser window to see different breakpoints activate.

Detect device orientation changes using orientation: portrait or orientation: landscape media queries.

Landscape Mode

Device is in landscape orientation (width > height)

Rotate your device or resize the browser window to see orientation changes.

All the tools in one place

With Radzen Blazor subscription you get the full toolkit, including:

Dedicated support backed by proven expertise

Premium themes and theme editor

Ready-to-use UI blocks

Complete app templates

Visual design-time-experience

Start Free See Subscription Plans

On this page