syncfusion-blazor-media-query

Syncfusion Blazor 媒体查询

Syncfusion Blazor 媒体查询组件可检测当前屏幕尺寸，并根据定义的断点触发布局更改。这样，您便可以构建响应式、自适应的应用程序，为各种设备尺寸提供出色的用户体验。

何时使用此技能

在以下情况下使用此技能：

• 构建响应式布局，以适应不同的屏幕尺寸（移动设备、平板电脑、桌面设备）
• 根据当前设备断点有条件地呈现组件
• 根据屏幕宽度动态应用样式
• 将媒体查询与其他 Syncfusion 组件（Data Grid、Charts 等）集成
• 使用级联值在多个页面中创建可复用的响应式模式

文档与导航指南

入门

📄 阅读： references/getting-started.md

• NuGet 包安装（Visual Studio、VSCode、.NET CLI）
• 命名空间导入和服务注册
• 主题样式表配置
• 首个组件的实现

断点与媒体查询

📄 阅读： references/breakpoints-and-media-queries.md

• 了解内置断点（Small、Medium、Large）
• 绑定 ActiveBreakpoint 属性
• 修改内置断点
• 创建自定义媒体断点

响应式布局模式

📄 阅读： references/responsive-layout-patterns.md

• 绑定 ActiveBreakpoint 属性
• 根据屏幕尺寸有条件地呈现内容
• 动态调整属性的模式
• 布局适配策略

组件集成

📄 阅读： references/component-integration.md

• 使用 MainLayout.razor 全局复用组件
• 级联值和参数
• 将 Data Grid 集成到响应式表格中
• 多组件布局的最佳实践

快速入门示例

@using Syncfusion.Blazor

<SfMediaQuery @bind-ActiveBreakPoint="currentBreakpoint"></SfMediaQuery>

<h3>Current Breakpoint: @currentBreakpoint</h3>

@if (currentBreakpoint == "Small")
{
    <p>You are viewing on a mobile device</p>
}
else if (currentBreakpoint == "Medium")
{
    <p>You are viewing on a tablet</p>
}
else
{
    <p>You are viewing on a desktop</p>
}

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

常见用例

1. 响应式 Data Grid

根据屏幕尺寸隐藏或显示列，并调整行呈现模式：

Small → Vertical row layout, hide non-essential columns
Medium → Adaptive mode enabled
Large → Horizontal layout, all columns visible

2. 响应式导航

在桌面设备上显示完整导航，在移动设备上显示汉堡菜单：

Small → Collapse navigation to hamburger menu
Large → Show full navigation bar

3. 多列布局

根据可用空间调整网格布局：

Small → 1-column layout
Medium → 2-column layout
Large → 3-column layout

4. 全局应用响应式布局

在 MainLayout.razor 中用级联媒体查询包装整个应用程序：

MainLayout → Provides activeBreakpoint to all pages
Child Pages → Use CascadingParameter to access breakpoint
Result → Entire app responds to screen size changes

关键属性

属性	类型	描述
ActiveBreakPoint	string	当前匹配的断点名称（Small、Medium、Large 或自定义名称）
MediaBreakpoints	List	包含名称和媒体查询字符串的自定义断点

常见模式

模式 1：简单的条件呈现

<SfMediaQuery @bind-ActiveBreakPoint="bp"></SfMediaQuery>

@if (bp == "Small")
{
    <MobileLayout />
}
else if (bp == "Medium")
{
    <TabletLayout />
}
else
{
    <DesktopLayout />
}

模式 2：动态组件属性

<SfMediaQuery @bind-ActiveBreakPoint="bp"></SfMediaQuery>

@{
    var pageSize = bp == "Small" ? 10 : 25;
    var allowPaging = bp != "Small";
}

<SfGrid PageSettings="@new GridPageSettings { PageSize = pageSize }">
    ...
</SfGrid>

模式 3：响应式导航

<SfMediaQuery @bind-ActiveBreakPoint="bp"></SfMediaQuery>

@if (bp == "Small")
{
    <button @onclick="ToggleMenu">☰ Menu</button>
}
else
{
    <nav>Full Navigation Bar</nav>
}