scss 响应式字体

Posted 2021-05-17

/* Responsive font sizes
   ========================================================================== */

$responsive-fonts: (
  'xs': 14px,
  'sm': 16px,
  'md': 18px,
  'lg': 20px,
  'xl': 22px
) !default;


@each $breakpoint-key, $breakpoint-value in $breakpoints {
  @include media-breakpoint-up(#{$breakpoint-key}) {
    font-size: map-get($responsive-fonts,$breakpoint-key)
  }
}