Create Responsive Web Designs Like a Pro with Blazor Media Query
Tags: blazor, development, web, ui
Published: 2024-02-28 06:56:17

---
title: Create Responsive Web Designs Like a Pro with Blazor Media Query
published: true
date: 2024-02-26 09:10:48 UTC
tags: blazor, development, web, ui
canonical_url: https://www.syncfusion.com/blogs/post/responsive-web-blazor-mediaquery.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wr5dv95owegsvyxvo4lc.png
---
The Syncfusion [Blazor Media Query component](https://www.syncfusion.com/blazor-components/blazor-media-query "Blazor Media Query Component") effortlessly adjusts your web applications’ layouts based on browser size, ensuring they look stunning across all devices and screen sizes. In this blog, we’ll uncover the key features of this powerful tool and dive into how you can integrate it seamlessly into your apps. Easily create responsive and adaptive web layouts powered by the Syncfusion Blazor Media Query component.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/02/Adaptive-layouts-of-Blazor-Media-Query-component.gif" alt="Adaptive layouts of Blazor Media Query component" style="width:100%">

  <figcaption>Adaptive layouts of Blazor Media Query component</figcaption>

</figure>

## Key features

The key features of the Blazor Media Query component include:

- [Use predefined media breakpoints](#Use).
- [Customize predefined media breakpoints](#Customize).
- [Add one or more custom media breakpoints](#Add).
- [Create a responsive design and integrate other components](#create).

## <a name="Use">Use predefined media breakpoints</a>

The Blazor Media Query component provides a set of predefined standard media breakpoints, simplifying the process of creating responsive webpages that seamlessly adapt to various devices. These breakpoints are defined based on typical device widths.

By detecting changes in the browser’s size whenever the defined media breakpoints are matched, the component automatically adjusts the layouts, ensuring your apps look great across different devices and screen sizes.

<table width="623">
<tbody>
<tr style="background: none;">
<td width="123">
<p>Small</p>
</td>
<td width="501">
<p>browser width &lt;= 768 pixels</p>
</td>
</tr>
<tr>
<td width="123">
<p>Medium</p>
</td>
<td width="501">
<p>browser width between 768 and 1024 pixels</p>
</td>
</tr>
<tr>
<td width="123">
<p>Large</p>
</td>
<td width="501">
<p>browser width &gt;= 1024 pixels</p>
</td>
</tr>
</tbody>
</table>


Refer to the following code example.

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

Active media name: @activeBreakpoint

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

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/02/Setting-predefined-breakpoints-in-Blazor-Media-Query.gif" alt="Setting predefined breakpoints in Blazor Media Query" style="width:100%">

  <figcaption>Setting predefined breakpoints in Blazor Media Query</figcaption>

</figure>

## <a name="Customize">Customize the predefined media breakpoints</a>

You can easily modify the predefined media breakpoints to meet your unique needs. The Media Query component allows you to adjust the static values for the [Small](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfMediaQuery.html#Syncfusion_Blazor_SfMediaQuery_Small "Small property of Blazor Media Query"), [Medium](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfMediaQuery.html#Syncfusion_Blazor_SfMediaQuery_Medium "Medium property of Blazor Media Query"), and [Large](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfMediaQuery.html#Syncfusion_Blazor_SfMediaQuery_Large "Large property of Blazor Media Query") breakpoints to define exactly when layout adjustments should occur.

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

Active media name: @activeBreakpoint

<br />

Active media query: <b>@GetActiveMediaQuery()</b>

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

    protected override void OnInitialized()
    {
        SfMediaQuery.Small.MediaQuery = "(max-width: 500px)";
        SfMediaQuery.Medium.MediaQuery = "(min-width: 500px)";
        SfMediaQuery.Large.MediaQuery = "(min-width: 750px)";
        base.OnInitialized();
    }

    public string GetActiveMediaQuery()
    {
        string mediaQuery = "";

        switch (activeBreakpoint)
        {
            case "Small":
                mediaQuery = SfMediaQuery.Small.MediaQuery;
                break;
            case "Medium":
                mediaQuery = SfMediaQuery.Medium.MediaQuery;
                break;
            case "Large":
                mediaQuery = SfMediaQuery.Large.MediaQuery;
                break;
        }

        return mediaQuery;
    }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/02/Customizing-the-predefined-media-breakpoints-in-the-Blazor-Media-Query-component.gif" alt="Customizing the predefined media breakpoints in the Blazor Media Query component" style="width:100%">

  <figcaption>Customizing the predefined media breakpoints in the Blazor Media Query component</figcaption>

</figure>

## <a name="Add">Add one or more custom media breakpoints</a>

Extend the adaptability of your web app by adding one or more custom media breakpoints. Utilize the [MediaBreakpoints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfMediaQuery.html#Syncfusion_Blazor_SfMediaQuery_MediaBreakpoints "MediaBreakpoints property of Blazor Media Query") property to define breakpoints that align with your unique design needs.

```xml
<SfMediaQuery MediaBreakpoints="@mediaBreakPoint" @bind-ActiveBreakPoint="activeBreakpoint"></SfMediaQuery>

Active media name: <b>@activeBreakpoint</b>

@code {
    private string activeBreakpoint;
    private List<MediaBreakpoint> mediaBreakPoint = new List<MediaBreakpoint>();
    protected override void OnInitialized()
    {
        mediaBreakPoint = new List<MediaBreakpoint>()
        {
            new MediaBreakpoint() { Breakpoint = "Mobile", MediaQuery = "(max-width: 600px)" },
            new MediaBreakpoint() { Breakpoint = "Tablet", MediaQuery = "(min-width: 600px) and (max-width: 900px)" },
            new MediaBreakpoint() { Breakpoint = "Laptop", MediaQuery = "(min-width: 900px)" }
        };
        base.OnInitialized();
    }
}
```

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/02/Adding-custom-media-breakpoints-in-the-Blazor-Media-Query-component.gif" alt="Adding custom media breakpoints in the Blazor Media Query component" style="width:100%">

  <figcaption>Adding custom media breakpoints in the Blazor Media Query component</figcaption>

</figure>

## <a name="create">Create a responsive design and integrate other Syncfusion components</a>

You can create a more responsive web design by seamlessly integrating the Blazor Media Query component with other Syncfusion Blazor components. Doing this allows you to perform conditional rendering for various screen sizes and achieve a dynamic UI with conditional styling.

Refer to the following code example. In it, we integrate the DataGrid with the Media Query component to demonstrate the dynamic updating of adaptive functionalities.

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

Active media name: <b>@activeBreakpoint</b>

@{
    var containerHeight = "100%";

    if (activeBreakpoint == "Small")
    {
        enableAdaptiveUIMode = true;
        renderingMode = RowDirection.Vertical;
        containerHeight = "550px";
    }
    else if (activeBreakpoint == "Medium")
    {
        enableAdaptiveUIMode = true;
    }
    else
    {
        enableAdaptiveUIMode = false;
    }

}

<div style="position:relative; height: @containerHeight;">

    <SfGrid DataSource="@orders" EnableAdaptiveUI="@enableAdaptiveUIMode" RowRenderingMode="@renderingMode" AllowSorting="true" AllowFiltering="true" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update", "Search" })" Height="100%" Width="100%">
        <GridFilterSettings Type="@FilterType.Excel"></GridFilterSettings>
        <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog"></GridEditSettings>
        <GridColumns>
            <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true"></GridColumn>
            <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name"></GridColumn>
            <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date"></GridColumn>
            <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2"></GridColumn>
        </GridColumns>
    </SfGrid>

</div>

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

    private List<Order> orders { get; set; }

    private bool enableAdaptiveUIMode { get; set; }
    private RowDirection renderingMode { get; set; }

    protected override void OnInitialized()
    {
        orders = Enumerable.Range(1, 75).Select(x => new Order()
            {
                OrderID = 1000 + x,
                CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
                Freight = 2.1 * x,
                OrderDate = DateTime.Now.AddDays(-x),
            }).ToList();
    }

    public class Order
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }
}
```

The output is in the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/02/Creating-responsive-web-design-for-the-DataGrid-component-using-Blazor-Media-Query.gif" alt="Creating responsive web design for the DataGrid component using Blazor Media Query" style="width:100%">

  <figcaption>Creating responsive web design for the DataGrid component using Blazor Media Query</figcaption>

</figure>

## References

Refer to the [Blazor Media Query component demos](https://blazor.syncfusion.com/demos/media-query/default-functionalities "Blazor Media Query component demos") and [documentation](https://blazor.syncfusion.com/documentation/media-query/getting-started "Getting Started with Blazor Media Query Component") for more details.

## Conclusion

Thanks for reading! In this blog, we’ve delved into the exciting features of the [Syncfusion Blazor Media Query component](https://www.syncfusion.com/blazor-components/blazor-media-query "Blazor Media Query Component"). Try out this powerful tool and share your feedback in the comments section. Say goodbye to static designs and hello to dynamic responsiveness!

For our existing customers, the newest version of Essential Studio is available on the [License and Downloads](https://www.syncfusion.com/account/login "Essential Studio License and Downloads page") page. If you’re new to Syncfusion, we offer a [30-day free trial](https://www.syncfusion.com/downloads "Get free evalution of the Essential Studio products") to experience the vast array of features we provide.

If you have questions, you can reach us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We’re always happy to assist you!

## Related blogs

- [Perform Effortless CRUD Actions in Blazor DataGrid with Fluxor](https://www.syncfusion.com/blogs/post/crud-blazor-datagrid-fluxor.aspx "Blog: Perform Effortless CRUD Actions in Blazor DataGrid with Fluxor")
- [Mastering State Maintenance in Blazor Tabs](https://www.syncfusion.com/blogs/post/state-maintenance-blazor-tabs.aspx "Blog: Mastering State Maintenance in Blazor Tabs")
- [Enhancing the Blazor File Manager Performance with Virtualization](https://www.syncfusion.com/blogs/post/blazor-file-manager-virtualization.aspx "Blog: Enhancing the Blazor File Manager Performance with Virtualization")
- [Transforming a Blazor WebAssembly (WASM) App into a Progressive Web App](https://www.syncfusion.com/blogs/post/transform-blazor-wasm-to-pwa.aspx "Blog: Transforming a Blazor WebAssembly (WASM) App into a Progressive Web App")