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.
Use the Query parameter to specify a CSS media query and the Change event to respond when the query matches or stops matching.
Resize your browser window to see the media query in action.
Conditionally display different content for mobile and desktop viewports using media queries.
Use multiple RadzenMediaQuery components to respond to different screen sizes and create complex responsive layouts.
XS Extra Small: ≤ 576px
SM Small: 577px - 768px
MD Medium: 769px - 1024px
LG Large: ≥ 1025px
Detect device orientation changes using orientation: portrait or orientation: landscape media queries.
Device is in landscape orientation (width > height)
Rotate your device or resize the browser window to see orientation changes.