Blazor WASM中创建子视口替代iframe适配媒体查询

原生CSS媒体查询是绑定浏览器/设备视口的，无法直接适配容器尺寸，但可以通过以下几种无iframe方案实现需求，同时保证组件与应用共享服务实例：

1. CSS容器查询（推荐现代浏览器使用） #

这是最直接的原生方案，允许元素根据父容器的尺寸应用样式，完全脱离视口依赖。

实现步骤： #

• 给DockingWindow根容器设置容器查询上下文：

.docking-window {
  container-type: inline-size; /* 基于容器水平宽度触发查询 */
  container-name: docking-container; /* 可选，命名容器方便精准定位 */
}

• 内部组件用容器查询替换原媒体查询：

/* 原视口媒体查询 */
@media (max-width: 768px) {
  .inner-component {
    /* 移动端样式 */
  }
}

/* 替换为容器查询 */
@container docking-container (max-width: 768px) {
  .inner-component {
    /* 容器宽度小于768px时的样式 */
  }
}

优势： #

• 纯CSS实现，无需JS介入
• 组件直接感知父容器尺寸，和视口无关
• 完全兼容Blazor服务实例共享，无隔离问题

注意： #

• 浏览器兼容性：Chrome 105+、Firefox 110+、Safari 16+均支持，Blazor WASM目标浏览器通常满足要求；若需兼容旧版本，可搭配container-queries-polyfill降级。

2. Blazor监听容器尺寸+动态CSS类 #

如果容器查询兼容性不满足，可通过Blazor的JS互操作监听SplitterPane尺寸变化，给内部组件动态切换适配类。

实现步骤： #

1. 编写JS监听函数（wwwroot/js/docking-utils.js）：

export function listenResize(elementId, dotNetRef) {
  const element = document.getElementById(elementId);
  const observer = new ResizeObserver(entries => {
    const width = entries[0].contentRect.width;
    dotNetRef.invokeMethodAsync("OnContainerResized", width);
  });
  observer.observe(element);
  return () => observer.disconnect();
}

2. Blazor组件中集成监听逻辑：

@inject IJSRuntime JSRuntime
@implements IDisposable

<div id="@containerId" class="docking-window">
  <div class="@GetComponentClass()">
    @ChildContent
  </div>
</div>

@code {
  [Parameter] public RenderFragment ChildContent { get; set; }
  private string containerId = Guid.NewGuid().ToString();
  private IJSObjectReference _jsModule;
  private DotNetObjectReference<DockingWindow> _dotNetRef;
  private int _containerWidth;

  protected override async Task OnAfterRenderAsync(bool firstRender) {
    if (firstRender) {
      _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./js/docking-utils.js");
      _dotNetRef = DotNetObjectReference.Create(this);
      await _jsModule.InvokeVoidAsync("listenResize", containerId, _dotNetRef);
    }
  }

  [JSInvokable]
  public void OnContainerResized(int width) {
    _containerWidth = width;
    StateHasChanged();
  }

  private string GetComponentClass() {
    if (_containerWidth < 460) return "inner-component--small";
    if (_containerWidth < 768) return "inner-component--medium";
    return "inner-component--large";
  }

  public void Dispose() {
    _jsModule?.DisposeAsync();
    _dotNetRef?.Dispose();
  }
}

3. 内部组件根据类编写适配样式：

.inner-component--small { padding: 8px; font-size: 14px; }
.inner-component--medium { padding: 12px; font-size: 16px; }
.inner-component--large { padding: 16px; font-size: 18px; }

优势： #

• 兼容性覆盖旧浏览器
• 完全在Blazor生态内实现，服务实例共享无冲突

3. CSS变量+ResizeObserver动态传递尺寸 #

轻量方案，通过ResizeObserver将容器尺寸赋值给CSS变量，内部组件基于变量编写响应式样式。

实现步骤： #

1. JS设置CSS变量（wwwroot/js/resize-vars.js）：

export function setupResizeVars(elementId) {
  const element = document.getElementById(elementId);
  new ResizeObserver(entries => {
    const { width } = entries[0].contentRect;
    element.style.setProperty('--container-width', `${width}px`);
  }).observe(element);
}

2. Blazor组件初始化：

@inject IJSRuntime JSRuntime
@implements IDisposable

<div id="@containerId" class="docking-window">
  @ChildContent
</div>

@code {
  [Parameter] public RenderFragment ChildContent { get; set; }
  private string containerId = Guid.NewGuid().ToString();
  private IJSObjectReference _jsModule;

  protected override async Task OnAfterRenderAsync(bool firstRender) {
    if (firstRender) {
      _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./js/resize-vars.js");
      await _jsModule.InvokeVoidAsync("setupResizeVars", containerId);
    }
  }

  public void Dispose() {
    _jsModule?.DisposeAsync();
  }
}

3. 内部组件使用CSS变量编写样式：

.inner-component {
  padding: calc(var(--container-width) * 0.03);
}

/* 模拟媒体查询逻辑 */
.inner-component {
  --is-small: clamp(0, 768px - var(--container-width), 1);
  background-color: calc(var(--is-small) #f0f0f0 + (1 - var(--is-small)) #ffffff);
}

优势： #

• 样式层面实现响应式，逻辑简洁
• 无需修改组件C#逻辑，仅需调整样式

内容的提问来源于stack exchange，提问作者Crandall