MediaQuery
Demonstration and configuration of the Radzen Blazor MediaQuery component.
The MediaQuery component allows you to respond to browser viewport size changes using CSS media queries. It fires a callback when the media query matches or stops matching, enabling responsive behavior in your Blazor applications. Common use cases include showing/hiding content based on screen size, adapting layouts for mobile devices, and adjusting component behavior for different viewport widths.
Basic Usage link
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.
Show/Hide Content Based on Screen Size link
Conditionally display different content for mobile and desktop viewports using media queries.
Desktop Navigation:
Multiple Breakpoints link
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
Device Orientation link
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.
Radzen Blazor Components, © 2018-2025 Radzen.
Source Code licensed under
MIT