Blazor 响应式布局和媒体查询的实现方法

Blazor响应式布局首选纯CSS媒体查询，配合CSS Grid/Flexbox实现布局重构；仅当需运行时逻辑分支时，才通过JS互操作获取屏幕尺寸并条件渲染。

Blazor 本身不直接提供 CSS 媒体查询的 C# 封装，但你可以通过标准 HTML/CSS 方式实现响应式布局，再结合少量 C# 逻辑增强交互体验。关键在于：用 CSS 控制样式响应，用 Blazor 管理状态与条件渲染，必要时用 JS 互操作获取视口信息。

用纯 CSS 实现媒体查询（推荐首选）

这是最轻量、最符合 Web 标准的方式。Blazor 组件（.razor）中写内联样式或引用外部 CSS 文件，完全支持 @media 规则。

• 在 wwwroot/css/app.css 或组件内 块中写媒体查询，例如：

@media (max-width: 768px) {
  .sidebar { display: none; }
  .content { width: 100%; }
}

• 组件中使用普通 class 即可自动响应：...
• 无需 Blazor 干预，浏览器原生生效，性能最好

用 CSS Grid / Flexbox 构建弹性布局结构

响应式不只是“隐藏/显示”，更是布局重构。Blazor 不影响 CSS 布局能力，可放心使用现代 CSS。

• 用 display: grid 配合 grid-template-areas 在不同断点定义不同区域排列
• 用 flex-wrap: wrap + flex-basis 让卡片列表在小屏自动换行
• 示例：一个三栏仪表板，在移动端变成单列堆叠，仅靠 CSS 即可完成

需要运行时判断屏幕尺寸？用 JS 互操作获取 window.innerWidth

仅当业务逻辑需根据尺寸做不同渲染（如加载不同数据、切换组件模式）时才需此步。

• 在 wwwroot/js/site.js 中添加：

window.getScreenWidth = () => window.innerWidth;

• 在 Blazor 组件中注入 IJSRuntime，调用：

private int screenWidth = 0;
protected override async Task OnInitializedAsync() {
    screenWidth = await JSRuntime.InvokeAsync("getScreenWidth");
}

• 配合 @if (screenWidth 条件渲染不同 UI 片段
• 注意：首次获取后，如需监听 resize，还需注册事件并触发 StateHasChanged()

避免常见误区

响应式不是“Blazor 特性”，而是前端通用实践。别试图用 C# 替代 CSS 做布局适配。

• ❌ 不要用大量 @if 判断宽度来切换整个 DOM 结构——维护难、性能差
• ❌ 不要每个组件都重复 JS 互操作——封装成服务或 BaseComponent 复用
• ✅ 优先用 CSS 完成视觉响应，C# 只处理真正需要逻辑分支的场景
• ✅ 使用 确保移动端正确缩放

基本上就这些。Blazor 的响应式本质是“让 CSS 正常工作”，而不是另起一套布局系统。写好 CSS，用好 @media，按需辅以轻量 JS 交互，就能做出流畅适配的界面。