如何在Angular中实现网页到移动端的自适应布局（无需Bootstrap）

要实现笔记本端多列并排、手机端单列堆叠的布局，不用Bootstrap的话，有两种实用方案：

方法一：纯CSS媒体查询（最简单高效） #

直接通过CSS媒体查询适配不同屏幕，无需额外Angular工具，适合大多数场景。

1. 编写组件HTML结构 #

假设布局由多个区块组成：

<div class="layout-container">
  <div class="layout-item">区块1</div>
  <div class="layout-item">区块2</div>
  <div class="layout-item">区块3</div>
</div>

2. 编写响应式CSS #

方案A：用Flexbox实现

/* 笔记本端样式 */
.layout-container {
  display: flex;
  gap: 1rem; /* 区块间间距 */
  flex-wrap: wrap;
}

.layout-item {
  flex: 1 1 300px; /* 区块最小宽度300px，自动填充剩余空间 */
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 4px;
}

/* 手机端样式（屏幕宽度≤768px时触发） */
@media (max-width: 768px) {
  .layout-container {
    flex-direction: column;
  }
  
  .layout-item {
    flex: 1 1 auto; /* 自适应全屏宽度 */
  }
}

方案B：用Grid实现

/* 笔记本端样式 */
.layout-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

/* 手机端样式 */
@media (max-width: 768px) {
  .layout-container {
    grid-template-columns: 1fr;
  }
}

.layout-item {
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 4px;
}

方法二：Angular BreakpointObserver（需TS逻辑处理时用） #

如果需要根据屏幕断点在TypeScript中做额外操作（比如加载不同数据、显示隐藏元素），可以用Angular CDK的BreakpointObserver。

1. 安装Angular CDK #

npm install @angular/cdk

2. 导入Layout模块 #

在组件所属的模块中导入：

import { LayoutModule } from '@angular/cdk/layout';

@NgModule({
  imports: [
    // 其他模块
    LayoutModule
  ]
})
export class YourModule { }

3. 在组件中监听断点 #

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  isMobile = false;

  constructor(private breakpointObserver: BreakpointObserver) {}

  ngOnInit(): void {
    this.breakpointObserver.observe([Breakpoints.Handset])
      .subscribe(result => {
        this.isMobile = result.matches;
      });
  }
}

4. 在HTML中切换布局类 #

<div [class.mobile-layout]="isMobile" [class.desktop-layout]="!isMobile">
  <div class="layout-item">区块1</div>
  <div class="layout-item">区块2</div>
  <div class="layout-item">区块3</div>
</div>

对应CSS样式 #

.desktop-layout {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.mobile-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.layout-item {
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 4px;
}

.desktop-layout .layout-item {
  flex: 1 1 300px;
}

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