Angular Material桌面端元素与字体过大，如何调整为更小尺寸？

当然可以！Angular Material的灵活性完全支持这类定制需求，针对桌面端用户觉得默认字体和组件过大的问题，我给你整理了几个实用的方案：

Angular Material的排版系统基于16px的全局字体基准（<html>标签默认值），你可以直接修改这个基准值，再配合Material的排版变量，让所有组件自动适配缩小后的尺寸：

// 在全局样式文件（比如styles.scss）中添加
html {
  font-size: 14px; // 把默认16px改为14px，整体缩放比例为87.5%，可按需调整到12px（75%）
}

// 覆盖Angular Material的排版配置，确保组件排版层级一致
@use '@angular/material' as mat;

$custom-typography: mat.define-typography-config(
  $font-size: 14px,
  $line-height: 1.5,
  // 可选：精细调整各层级字体（如标题、按钮）
  $headline-1: mat.define-typography-level(84px, 96px, 300, 'Roboto', -1.5),
  $button: mat.define-typography-level(14px, 20px, 500, 'Roboto', 0.125)
);

@include mat.core($custom-typography);

这个方案的优势是全局统一生效，所有Material组件（按钮、卡片、输入框等）都会同步缩小，且保持排版逻辑的一致性，不会出现视觉错位。

如果不想修改字体基准，只想快速让所有组件视觉上缩小，可以用CSS的transform: scale()属性，给Material的根容器设置缩放：

// styles.scss
.mat-app-background {
  transform: scale(0.75); // 直接缩放到75%，匹配用户的舒适浏览比例
  transform-origin: top left; // 从左上角开始缩放，避免页面整体偏移
  min-height: 100vh; // 防止缩放后页面高度不足
}

注意：这是视觉层面的缩放，不会改变DOM元素的实际尺寸，少数场景下（比如精准点击区域、元素定位）可能有小问题，但胜在实现简单、快速生效。

如果你只想针对特定组件调整（比如只缩小按钮或输入框），可以覆盖Angular Material提供的组件SCSS变量：

@use '@angular/material' as mat;

// 覆盖按钮默认高度和字体
$button-height: 32px; // 默认36px
$button-font-size: 13px; // 默认14px

// 覆盖输入框内边距
$input-padding: 7px 11px; // 默认10px 16px

// 将自定义变量应用到组件
@include mat.button-theme($button-height, $button-font-size);
@include mat.input-theme($input-padding);

这个方案适合局部定制，但需要你熟悉对应组件的变量名称，可以查看Angular Material官方文档的组件样式章节获取变量列表。

如果想让用户自主选择舒适的缩放比例，可以在页面添加一个控制按钮，通过Angular动态修改全局样式：

// 在组件类中实现
import { Renderer2 } from '@angular/core';

constructor(private renderer: Renderer2) {}

setZoomLevel(scale: number) {
  // 修改全局字体基准的方式
  const htmlEl = document.querySelector('html');
  this.renderer.setStyle(htmlEl, 'font-size', `${16 * scale}px`);

  // 或者用transform缩放容器的方式
  const appContainer = document.querySelector('.mat-app-background');
  this.renderer.setStyle(appContainer, 'transform', `scale(${scale})`);
}

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