Back to Details

syncfusion-blazor-media-query

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Syncfusion Blazor Media Query

Syncfusion Blazor Media Query

The Syncfusion Blazor Media Query component detects the current screen size and triggers layout changes based on defined breakpoints. This enables you to build responsive, adaptive applications that provide optimal user experiences across all device sizes.
Syncfusion Blazor Media Query组件可检测当前屏幕尺寸，并根据定义的断点触发布局更改。这使您能够构建响应式、自适应的应用程序，在所有设备尺寸上提供最佳用户体验。

When to Use This Skill

何时使用该组件

Use this skill when you need to:
  • Build responsive layouts that adapt to different screen sizes (mobile, tablet, desktop)
  • Conditionally render components based on the current device breakpoint
  • Apply dynamic styling based on screen width
  • Integrate Media Query with other Syncfusion components (Data Grid, Charts, etc.)
  • Create reusable responsive patterns across multiple pages using cascading values
在以下场景中使用该组件：
  • 构建响应式布局，适配不同屏幕尺寸（移动设备、平板、桌面设备）
  • 根据当前设备断点有条件地渲染组件
  • 根据屏幕宽度应用动态样式
  • 将Media Query与其他Syncfusion组件集成（如数据网格、图表等）
  • 使用级联值创建可在多个页面复用的响应式模式

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md
  • NuGet package installation (Visual Studio, VSCode, .NET CLI)
  • Namespace imports and service registration
  • Theme stylesheet configuration
  • First component implementation
📄 阅读： references/getting-started.md
  • NuGet包安装（Visual Studio、VSCode、.NET CLI）
  • 命名空间导入与服务注册
  • 主题样式表配置
  • 首个组件实现

Breakpoints and Media Queries

断点与媒体查询

📄 Read: references/breakpoints-and-media-queries.md
  • Understanding built-in breakpoints (Small, Medium, Large)
  • ActiveBreakpoint property binding
  • Modifying built-in breakpoints
  • Creating custom media breakpoints
📄 阅读： references/breakpoints-and-media-queries.md
  • 了解内置断点（Small、Medium、Large）
  • ActiveBreakpoint属性绑定
  • 修改内置断点
  • 创建自定义媒体断点

Responsive Layout Patterns

响应式布局模式

📄 Read: references/responsive-layout-patterns.md
  • Binding to ActiveBreakpoint property
  • Conditional rendering based on screen size
  • Dynamic property adjustment patterns
  • Layout adaptation strategies
📄 阅读： references/responsive-layout-patterns.md
  • 绑定ActiveBreakpoint属性
  • 根据屏幕尺寸有条件地渲染
  • 动态属性调整模式
  • 布局适配策略

Component Integration

组件集成

📄 Read: references/component-integration.md
  • Global component reuse with MainLayout.razor
  • Cascading values and parameters
  • Integration with Data Grid for responsive tables
  • Best practices for multi-component layouts
📄 阅读： references/component-integration.md
  • 使用MainLayout.razor实现全局组件复用
  • 级联值与参数
  • 与数据网格集成实现响应式表格
  • 多组件布局最佳实践

Quick Start Example

快速入门示例

razor
@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; }
}
razor
@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; }
}

Common Use Cases

常见用例

1. Responsive Data Grid

1. 响应式数据网格

Hide or show columns based on screen size, adjust row rendering mode:
Small → Vertical row layout, hide non-essential columns
Medium → Adaptive mode enabled
Large → Horizontal layout, all columns visible
根据屏幕尺寸隐藏或显示列，调整行渲染模式：
Small → 垂直行布局，隐藏非必要列
Medium → 启用自适应模式
Large → 水平布局，显示所有列

2. Responsive Navigation

2. 响应式导航

Show full navigation on desktop, hamburger menu on mobile:
Small → Collapse navigation to hamburger menu
Large → Show full navigation bar
在桌面设备显示完整导航，在移动设备显示汉堡菜单：
Small → 将导航折叠为汉堡菜单
Large → 显示完整导航栏

3. Multi-Column Layouts

3. 多列布局

Adjust grid layout based on available space:
Small → 1-column layout
Medium → 2-column layout
Large → 3-column layout
根据可用空间调整网格布局：
Small → 单列布局
Medium → 双列布局
Large → 三列布局

4. Global App Responsiveness

4. 全局应用响应式

Wrap entire application in MainLayout.razor with cascading Media Query:
MainLayout → Provides activeBreakpoint to all pages
Child Pages → Use CascadingParameter to access breakpoint
Result → Entire app responds to screen size changes
使用级联Media Query将整个应用包裹在MainLayout.razor中：
MainLayout → 为所有页面提供activeBreakpoint
子页面 → 使用CascadingParameter访问断点
结果 → 整个应用响应屏幕尺寸变化

Key Properties

关键属性

PropertyTypeDescription
ActiveBreakPoint
stringThe currently matching breakpoint name (Small, Medium, Large, or custom)
MediaBreakpoints
List<MediaBreakpoint>Custom breakpoints with name and media query string
属性类型描述
ActiveBreakPoint
string当前匹配的断点名称（Small、Medium、Large或自定义名称）
MediaBreakpoints
List<MediaBreakpoint>包含名称和媒体查询字符串的自定义断点列表

Common Patterns

常见模式

Pattern 1: Simple Conditional Rendering

模式1：简单条件渲染

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

@if (bp == "Small")
{
    <MobileLayout />
}
else if (bp == "Medium")
{
    <TabletLayout />
}
else
{
    <DesktopLayout />
}
razor
<SfMediaQuery @bind-ActiveBreakPoint="bp"></SfMediaQuery>

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

Pattern 2: Dynamic Component Properties

模式2：动态组件属性

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

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

<SfGrid PageSettings="@new GridPageSettings { PageSize = pageSize }">
    ...
</SfGrid>
razor
<SfMediaQuery @bind-ActiveBreakPoint="bp"></SfMediaQuery>

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

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

Pattern 3: Responsive Navigation

模式3：响应式导航

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

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

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