Angular 13升级至15后页面视觉缩小及布局异常问题排查

我们将Angular应用从v13升级至v15（包含Angular Material），并更新排版配置以匹配新命名规则后，发现两个版本的应用存在视觉差异。使用浏览器检查器查看时，字体大小均一致，但v13版本中垂直堆叠的前两张卡片，在v15版本中却变为水平排列，对应的Grid布局样式未发生变化。

v13排版配置与初始化代码 #

@function strip-unit($number) {
  @if type-of($number) == "number" and not unitless($number) {
    @return math.div($number, $number * 0 + 1);
  }

  @return $number;
}

@function rem-value($size) {
  $l-size: strip-unit($size);
  @return math.div($l-size, 15) * 1rem;
}

$ff-text: "Roboto, 'Helvetivca Neue', sans-serif";

$fs-base: 14px;
$fs-base-large: 15px;

$fs-display-4: rem-value(112px);
$fs-display-3: rem-value(56px);
$fs-display-2: rem-value(45px);
$fs-display-1: rem-value(32px);
$fs-headline: rem-value(24px);
$fs-title: rem-value(20px);
$fs-subheading-2: rem-value(18px);
$fs-subheading-1: rem-value(16px);
$fs-body-2: rem-value(15px);
$fs-body-1: rem-value(15px);
$fs-caption: rem-value(13px);
$fs-button: rem-value(14px);
$fs-input: inherit;

$lh-display-4: rem-value(112px);
$lh-display-3: rem-value(56px);
$lh-display-2: rem-value(48px);
$lh-display-1: rem-value(38px);
$lh-headline: rem-value(32px);
$lh-title: rem-value(32px);
$lh-subheading-2: rem-value(22px);
$lh-subheading-1: rem-value(19px);
$lh-body-2: rem-value(24px);
$lh-body-1: rem-value(24px);
$lh-caption: rem-value(19px);
$lh-button: rem-value(14px);
// Line-height must be unit-less fraction of the font-size for "input".
$lh-input: 1.125;

$fw-light: 300;
$fw-regular: 400;
$fw-medium: 500;
$fw-bold: 700;

$typography: mat.define-typography-config(
  $font-family: $ff-text,
  $display-4:
    mat.define-typography-level(
      $fs-display-4,
      $lh-display-4,
      $fw-light,
      $letter-spacing: -0.05em
    ),
  $display-3:
    mat.define-typography-level(
      $fs-display-3,
      $lh-display-3,
      $fw-regular,
      $letter-spacing: -0.02em
    ),
  $display-2:
    mat.define-typography-level(
      $fs-display-2,
      $lh-display-2,
      $fw-regular,
      $letter-spacing: -0.005em
    ),
  $display-1: mat.define-typography-level($fs-display-1, $lh-display-1, $fw-medium),
  $headline: mat.define-typography-level($fs-headline, $lh-headline, $fw-medium),
  $title: mat.define-typography-level($fs-title, $lh-title, $fw-medium),
  $subheading-2:
    mat.define-typography-level($fs-subheading-2, $lh-subheading-2, $fw-medium),
  $subheading-1:
    mat.define-typography-level($fs-subheading-1, $lh-subheading-1, $fw-medium),
  $body-2: mat.define-typography-level($fs-body-2, $lh-body-2, $fw-medium),
  $body-1: mat.define-typography-level($fs-body-1, $lh-body-1, $fw-regular),
  $caption: mat.define-typography-level($fs-caption, $lh-caption, $fw-regular),
  $button: mat.define-typography-level($fs-button, $lh-button, $fw-medium),
  // Line-height must be unit-less fraction of the font-size.
  $input: mat.define-typography-level($fs-input, $lh-input, $fw-regular),
);

@include mat.core(t.$typography);

v15排版配置与初始化代码 #

@function strip-unit($number) {
  @if type-of($number) == "number" and not unitless($number) {
    @return math.div($number, $number * 0 + 1);
  }

  @return $number;
}

@function rem-value($size) {
  $l-size: strip-unit($size);
  @return math.div($l-size, 15) * 1rem;
}

$ff-text: "Roboto, 'Helvetivca Neue', sans-serif";

$fs-base: 14px;
$fs-base-large: 15px;

$fs-headline-1: 112px;
$fs-headline-2: 56px;
$fs-headline-3: 45px;
$fs-headline-4: 32px;
$fs-headline-5: 24px;
$fs-headline-6: 20px;
$fs-subtitle-1: 18px;
$fs-subtitle-2: 16px;
$fs-body-1: 18px;
$fs-body-2: 15px;
$fs-button: 14px;
$fs-caption: 13px;
$fs-overline: 9px;

$lh-headline-1: 112px;
$lh-headline-2: 56px;
$lh-headline-3: 48px;
$lh-headline-4: 38px;
$lh-headline-5: 32px;
$lh-headline-6: 32px;
$lh-subtitle-1: 22px;
$lh-subtitle-2: 19px;
$lh-body-1: 22px;
$lh-body-2: 24px;
$lh-button: 14px;
$lh-caption: 19px;
$lh-overline: 11px;

$fw-light: 300;
$fw-regular: 400;
$fw-medium: 500;
$fw-bold: 700;

$typography: mat.define-typography-config(
  $font-family: $ff-text,
  $headline-1:
    mat.define-typography-level(
      rem-value($fs-headline-1),
      rem-value($lh-headline-1),
      $fw-light,
      $letter-spacing: -0.05em
    ),
  $headline-2:
    mat.define-typography-level(
      rem-value($fs-headline-2),
      rem-value($lh-headline-2),
      $fw-regular,
      $letter-spacing: -0.02em
    ),
  $headline-3:
    mat.define-typography-level(
      rem-value($fs-headline-3),
      rem-value($lh-headline-3),
      $fw-regular,
      $letter-spacing: -0.005em
    ),
  $headline-4:
    mat.define-typography-level(
      rem-value($fs-headline-4),
      rem-value($lh-headline-4),
      $fw-medium
    ),
  $headline-5:
    mat.define-typography-level(
      rem-value($fs-headline-5),
      rem-value($lh-headline-5),
      $fw-medium
    ),
  $headline-6:
    mat.define-typography-level(
      rem-value($fs-headline-6),
      rem-value($lh-headline-6),
      $fw-medium
    ),
  $subtitle-1:
    mat.define-typography-level(
      rem-value($fs-subtitle-1),
      rem-value($lh-subtitle-1),
      $fw-medium
    ),
  $subtitle-2:
    mat.define-typography-level(
      rem-value($fs-subtitle-2),
      rem-value($lh-subtitle-2),
      $fw-medium
    ),
  $body-1:
    mat.define-typography-level(
      rem-value($fs-body-1),
      rem-value($lh-body-1),
      $fw-regular
    ),
  $body-2:
    mat.define-typography-level(
      rem-value($fs-body-2),
      rem-value($lh-body-2),
      $fw-regular
    ),
  $button:
    mat.define-typography-level(
      rem-value($fs-button),
      rem-value($lh-button),
      $fw-medium
    ),
  $caption:
    mat.define-typography-level(
      rem-value($fs-caption),
      rem-value($lh-caption),
      $fw-regular
    ),
  $overline:
    mat.define-typography-level(
      rem-value($fs-overline),
      rem-value($lh-overline),
      $fw-regular
    ),
);

@include mat.typography-hierarchy(t.$typography);

基础字体大小设置 #

我们在body元素上使用mat-typography类，并通过以下样式设置基础字体大小：

:root {
  --base-font-size: #{$fs-base};
  @media (min-width: 1390px) {
    --base-font-size: #{$fs-base-large};
  }
}

html {
  font-size: var(--base-font-size);
}

body {
  font-family: $ff-text;
}

Grid布局代码 #

.dashboard-signals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
  align-items: stretch;
  width: 100%;
  margin-bottom: 2.5rem;
  gap: 2rem;
}

请问造成该问题的原因是什么？

内容的提问来源于stack exchange，提问作者Kees de Bruin