Angular CDK 自适应布局技巧：响应式工具实操手册

Angular CDK 自适应布局的核心工具

Angular CDK 的 LayoutModule 提供了一套响应式工具，基于 CSS 媒体查询实现自适应布局。核心工具包括 BreakpointObserver 服务和预定义的断点常量（如 Breakpoints.Handset）。

配置与基础使用

安装 Angular CDK 后导入模块：

typescript 复制代码

import { LayoutModule } from '@angular/cdk/layout';
@NgModule({
  imports: [LayoutModule]
})

注入 BreakpointObserver 并监听断点变化：

typescript 复制代码

import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

constructor(private breakpointObserver: BreakpointObserver) {
  this.breakpointObserver.observe([Breakpoints.Handset])
    .subscribe(result => {
      this.isHandset = result.matches;
    });
}

常用断点常量

预定义断点覆盖主流设备场景：

typescript 复制代码

Breakpoints.Handset       // 手机竖屏 (max-width: 599.98px)
Breakpoints.Tablet        // 平板竖屏 (min-width: 600px) and (max-width: 839.98px)
Breakpoints.Web           // 桌面端 (min-width: 840px)
Breakpoints.HandsetLandscape // 手机横屏

动态样式绑定技巧

结合 ngClass 实现条件样式：

html 复制代码

<div [ngClass]="{'compact-view': isHandset}">
  <!-- 内容区 -->
</div>

通过 StyleService 动态计算尺寸：

typescript 复制代码

get responsivePadding() {
  return this.isHandset ? '8px' : '16px';
}

复杂布局响应策略

使用 BreakpointObserver.isMatched() 进行多条件判断：

typescript 复制代码

const isLargeScreen = this.breakpointObserver.isMatched('(min-width: 1200px)');

自定义断点组合：

typescript 复制代码

const customBreakpoints = [
  '(min-width: 768px) and (max-width: 1023px)',
  '(orientation: landscape)'
];

性能优化建议

避免频繁触发变更检测：

typescript 复制代码

this.breakpointObserver.observe([Breakpoints.Handset])
  .pipe(
    debounceTime(100),
    distinctUntilChanged()
  )
  .subscribe(/* ... */);

对静态内容使用 async 管道：

html 复制代码

<ng-container *ngIf="isHandset$ | async">
  <!-- 移动端专用内容 -->
</ng-container>

高级模式匹配技巧

媒体查询范围组合：

typescript 复制代码

Breakpoints.TabletPortrait   // 600px - 839.98px 且竖屏
Breakpoints.TabletLandscape  // 900px - 1199.98px 且横屏

逻辑运算符组合查询：

typescript 复制代码

const complexQuery = '(min-width: 500px) and (max-width: 1200px), (orientation: portrait)';

服务端渲染(SSR)处理

使用 isPlatformBrowser 避免服务端报错：

typescript 复制代码

import { isPlatformBrowser } from '@angular/common';

constructor(
  @Inject(PLATFORM_ID) private platformId: Object,
  private breakpointObserver: BreakpointObserver
) {
  if (isPlatformBrowser(this.platformId)) {
    // 客户端才执行断点检测
  }
}