Getting Started with Blazor Media Query in Blazor WASM App
18 Aug 202613 minutes to read
This section briefly explains how to include the Blazor Media Query component in a Blazor WebAssembly App using Visual Studio, Visual Studio Code, and the .NET CLI.
Create a new Blazor WebAssembly App
Create a Blazor WebAssembly App using Visual Studio via Microsoft Templates or the Syncfusion® Blazor Extension. For detailed instructions, refer to the Blazor WebAssembly App Getting Started documentation.
Run the following command to create a new Blazor WebAssembly App.
dotnet new blazorwasm -o BlazorApp
cd BlazorAppAlternatively, create a Blazor WebAssembly App using Visual Studio Code via Microsoft Templates, the Syncfusion® Blazor Extension, or the C# Dev Kit extension.
Run the following command to create a new Blazor WebAssembly App.
dotnet new blazorwasm -o BlazorApp
cd BlazorAppInstall the required Blazor packages
Install Syncfusion.Blazor.Core and Syncfusion.Blazor.Themes NuGet packages. All Syncfusion Blazor packages are available on nuget.org. See the NuGet packages topic for details.
- Go to Tools → NuGet Package Manager → Manage NuGet Packages for Solution.
- Search the required NuGet packages (
Syncfusion.Blazor.CoreandSyncfusion.Blazor.Themes) and install them.
Alternatively, you can install the same packages using the Package Manager Console with the following commands.
Install-Package Syncfusion.Blazor.Core -Version 34.2.2
Install-Package Syncfusion.Blazor.Themes -Version 34.2.2Open the terminal and run the following commands.
dotnet add package Syncfusion.Blazor.Core -v 34.2.2
dotnet add package Syncfusion.Blazor.Themes -v 34.2.2Open the command prompt and run the following commands.
dotnet add package Syncfusion.Blazor.Core -v 34.2.2
dotnet add package Syncfusion.Blazor.Themes -v 34.2.2Add import namespaces
After the packages are installed, open the ~/_Imports.razor file and import the Syncfusion.Blazor.Core namespace.
@using Syncfusion.Blazor.CoreRegister the Blazor service
Open the Program.cs file in Blazor WebAssembly App and register the Blazor service and include the required namespace reference using Syncfusion.Blazor; at the top.
builder.Services.AddSyncfusionBlazor();Add stylesheet and script resources
The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Include the stylesheet at the end of the <head> section in the ~wwwroot/index.html file.
<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />Include the required script references at the end of the <body> section in the ~wwwroot/index.html file to enable Media Query functionality.
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>Add Blazor Media Query component
Open a Razor file located in the ~/Pages/*.razor (for example, Home.razor) and add the Blazor Media Query component inside the razor file.
The Media Query component monitors the viewport width and updates the ActiveBreakPoint value as the screen size changes between defined breakpoints such as Small, Medium, and Large. This value can be used to conditionally apply styles or modify the layout. In the following example, the ActiveBreakPoint parameter is used to determine the currently active breakpoint and dynamically update the layout based on the screen size.
@using Syncfusion.Blazor.Core
<SfMediaQuery @bind-ActiveBreakPoint="activeBreakpoint"></SfMediaQuery>
<br />
@if (activeBreakpoint == "Small")
{
deviceSize = "small-device";
}
else if (activeBreakpoint == "Medium")
{
deviceSize = "medium-device";
}
else
{
deviceSize = "";
}
<div class="mediaquery-demo @deviceSize">
<div class="header e-skeleton e-skeleton-text">
<div class="search-box e-skeleton e-skeleton-text"></div>
</div>
<div class="banner e-skeleton e-skeleton-text e-shimmer-pulse"></div>
<div class="main-container">
<ul>
<li>
<div class="content e-skeleton e-skeleton-text e-shimmer-pulse"></div>
<div class="title e-skeleton e-skeleton-text e-shimmer-pulse"></div>
<p class="e-skeleton e-skeleton-text e-shimmer-pulse"></p>
</li>
<li>
<div class="content e-skeleton e-skeleton-text e-shimmer-pulse"></div>
<div class="title e-skeleton e-skeleton-text e-shimmer-pulse"></div>
<p class="e-skeleton e-skeleton-text e-shimmer-pulse"></p>
</li>
</ul>
</div>
<div class="footer e-skeleton e-skeleton-text"></div>
</div>
@code {
private string deviceSize { get; set; }
private string activeBreakpoint { get; set; }
}
<style>
.mediaquery-demo {
height: 715px;
margin: 0 10%;
border: 2px solid #f3f2f1;
border-top-width: 0px;
border-radius: 4px;
overflow: hidden;
}
.mediaquery-demo .e-skeleton {
display: block;
}
.mediaquery-demo .header {
height: 6vh;
text-align: center;
overflow: visible;
}
.mediaquery-demo .header .search-box {
width: 25%;
height: 55%;
margin-top: 1.5vh;
display: inline-block;
border-radius: 7px;
float: right;
margin-right: 3%;
background-color: white;
}
.mediaquery-demo .banner {
height: 35%;
margin: 1% 8%;
}
.mediaquery-demo .main-container {
margin: 0 8%;
height: 35%;
}
.mediaquery-demo .main-container ul {
list-style: none;
display: flex;
height: 100%;
padding: 0;
justify-content: space-between;
padding-top: 20px;
}
.mediaquery-demo .main-container ul li {
width: 49%;
}
.mediaquery-demo .main-container li .content {
height: 60%;
}
.mediaquery-demo .main-container li .title,
.mediaquery-demo .main-container li p {
width: 50%;
height: 7%;
margin-top: 3%;
}
.mediaquery-demo .main-container li p {
width: 80%;
}
.mediaquery-demo .footer {
height: 20%;
margin: 0% 8%;
}
.mediaquery-demo.medium-device .header .search-box {
width: 50%;
float: none;
margin-right: 0px;
}
.mediaquery-demo.medium-device .banner,
.mediaquery-demo.medium-device .main-container,
.mediaquery-demo.medium-device .footer {
margin: 0px;
}
.mediaquery-demo.medium-device .banner {
margin-top: 1%;
}
.mediaquery-demo.medium-device .main-container {
height: 42%;
}
.mediaquery-demo.medium-device .main-container ul {
flex-direction: column;
}
.mediaquery-demo.medium-device .main-container ul li {
height: 50%;
display: flex;
margin-bottom: 2%;
margin-left: 5%;
width: 100%;
}
.mediaquery-demo.medium-device .main-container li .content {
height: auto;
width: 30%;
}
.mediaquery-demo.medium-device .main-container li .title,
.mediaquery-demo.medium-device .main-container li p {
height: 24%;
}
.mediaquery-demo.medium-device .main-container li .title {
margin-left: 5%;
width: 25%;
margin-top: 0;
}
.mediaquery-demo.medium-device .main-container li p {
margin-top: 8%;
margin-left: -25%;
width: 55%;
}
.mediaquery-demo.small-device .header .search-box {
text-align: center;
float: none;
width: 60%;
height: 65%;
margin-top: 8vh;
background-color: inherit;
}
.mediaquery-demo.small-device .banner,
.mediaquery-demo.small-device .main-container,
.mediaquery-demo.small-device .footer {
margin: 0px;
height: 20%;
}
.mediaquery-demo.small-device .banner {
margin: 8vh 0 0;
}
.mediaquery-demo.small-device .main-container {
height: 48%;
}
.mediaquery-demo.small-device .main-container ul {
display: block;
}
.mediaquery-demo.small-device .main-container ul li {
height: 50%;
display: block;
width: 90%;
margin: 0 auto;
}
.mediaquery-demo.small-device .main-container li .content {
height: 40%;
width: auto;
}
.mediaquery-demo.small-device .main-container li .title {
width: 40%;
height: 10%;
}
.mediaquery-demo.small-device .main-container li p {
width: auto;
height: 10%;
}
</style>Run the application
Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Media Query component will render in your default web browser.
Open the terminal and run the following command.
dotnet runOpen the command prompt and run the following command.
dotnet run
You can refer to the Blazor Media Query feature tour to explore its key features and capabilities. You can also browse the Blazor Media Query examples to learn how to render and configure the component.