使用@mixin或@函数根据屏幕大小更改字体大小

@mixin responsive-font-size($max-width) {
  @media (max-width: $max-width) {
    font-size: 16px;
  }
}

h1 {
  font-size: 20px;
  @include responsive-font-size(768px); // 在768px及以下屏幕大小下，字体大小为16px
}

p {
  font-size: 14px;
  @include responsive-font-size(480px); // 在480px及以下屏幕大小下，字体大小为16px
}

@function responsive-font-size($max-width) {
  @if $max-width >= 768px {
    @return 16px;
  } @else if $max-width >= 480px {
    @return 14px;
  } @else {
    @return 12px;
  }
}

h1 {
  font-size: 20px;
  font-size: responsive-font-size(768px); // 在768px及以下屏幕大小下，字体大小为16px
}

p {
  font-size: 16px;
  font-size: responsive-font-size(480px); // 在480px及以下屏幕大小下，字体大小为14px
}