如何在Angular项目中实现全局字体大小的比例式调整？

嘿，这个需求我在做Angular大屏适配项目时刚好处理过！要实现全局字体按比例缩放还保持元素间的相对比例，核心思路是用CSS变量配合Angular的状态管理，给你一步步讲怎么落地：

我们先把全局基础字体大小定义成一个CSS变量，然后让项目里所有元素的字体、间距甚至组件尺寸都基于这个变量（比如用rem单位或者直接引用变量）。这样只要修改这个基础变量的值，所有依赖它的元素都会按比例缩放，完美保持相对比例。

1. 全局配置CSS变量 #

在项目根目录的styles.scss（或styles.css）里，给:root设置基础字体变量，同时把默认字体单位改成基于这个变量的rem：

:root {
  --base-font-size: 16px; /* 默认基础字体大小 */
}

body {
  font-size: var(--base-font-size);
  /* 把其他全局样式也改成相对单位，比如： */
  line-height: 1.5rem;
}

/* 举个例子，待办项的样式 */
.todo-item {
  font-size: 1.2rem; /* 相对于基础字体的1.2倍 */
  padding: 0.8rem 1rem;
}

2. 创建字体大小管理服务 #

我们需要一个Angular服务来统一管理字体大小的状态，方便组件间共享和持久化用户选择：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class FontSizeService {
  // 用BehaviorSubject保存当前字体大小，默认取localStorage里的设置或默认值
  private fontSizeSubject = new BehaviorSubject<string>(
    localStorage.getItem('baseFontSize') || '16px'
  );
  currentFontSize$ = this.fontSizeSubject.asObservable();

  // 更新字体大小的方法
  setFontSize(size: string): void {
    this.fontSizeSubject.next(size);
    localStorage.setItem('baseFontSize', size); // 持久化到本地存储
  }
}

3. 实现字体控制组件（下拉列表） #

创建一个简单的下拉组件，让用户选择字体大小：

import { Component } from '@angular/core';
import { FontSizeService } from '../services/font-size.service';

@Component({
  selector: 'app-font-size-selector',
  template: `
    <select (change)="onFontSizeChange($event)" class="font-size-select">
      <option value="14px">小字体</option>
      <option value="16px" selected>默认</option>
      <option value="18px">大字体</option>
      <option value="20px">超大字体</option>
    </select>
  `,
  styles: [`
    .font-size-select {
      padding: 0.5rem;
      font-size: 1rem;
      border-radius: 4px;
      border: 1px solid #ddd;
    }
  `]
})
export class FontSizeSelectorComponent {
  constructor(private fontSizeService: FontSizeService) {}

  onFontSizeChange(event: Event): void {
    const target = event.target as HTMLSelectElement;
    this.fontSizeService.setFontSize(target.value);
  }
}

4. 在根组件应用字体大小变化 #

在AppComponent里订阅服务的字体大小变化，动态更新全局CSS变量：

import { Component, OnInit, Renderer2 } from '@angular/core';
import { FontSizeService } from './services/font-size.service';

@Component({
  selector: 'app-root',
  template: `
    <app-font-size-selector></app-font-size-selector>
    <!-- 你的待办事项列表组件 -->
    <app-todo-list></app-todo-list>
  `
})
export class AppComponent implements OnInit {
  constructor(
    private fontSizeService: FontSizeService,
    private renderer: Renderer2
  ) {}

  ngOnInit(): void {
    // 订阅字体大小变化，更新全局CSS变量
    this.fontSizeService.currentFontSize$.subscribe(size => {
      this.renderer.setStyle(
        document.documentElement,
        '--base-font-size',
        size
      );
    });
  }
}

• 大屏默认适配：可以加媒体查询，在大屏设备上默认把基础字体调大，比如：

  @media screen and (min-width: 1920px) {
    :root {
      --base-font-size: 18px;
    }
  }
  

• 全局相对单位统一：除了字体，把组件的宽度、高度、间距都改成rem或者基于--base-font-size的变量，这样缩放时整个页面元素比例都能保持一致。
• 无障碍支持：可以把下拉选项的文本改成符合无障碍标准的描述，比如“小号（适合小屏）”“大号（适合大屏）”。

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