BTDK-DMS/src/styles/variables.scss

@use 'sass:math';

// 命名空间
$namespace: v;
// el命名空间
$elNamespace: el;
$W-scale-ratio-1440: math.div(1440, 1920);
$H-scale-ratio-900: math.div(900, 1080);

$W-scale-ratio-2560: math.div(2560, 1920);
$H-scale-ratio-1440: math.div(1440, 1080);

@mixin ResponsiveW($base-width) {
  width: $base-width + px;

  @media only screen and (max-width: 1440px) {
    width: calc($W-scale-ratio-1440 * #{$base-width}px);
  }

  @media only screen and (min-width: 2560px) {
    width: calc($W-scale-ratio-2560 * #{$base-width}px);
  }
}

@mixin ResponsiveH($base-height) {
  height: $base-height + px;

  @media only screen and (max-width: 1440px) {
    height: calc($H-scale-ratio-900 * #{$base-height}px);
  }

  @media only screen and (min-width: 2560px) {
    height: calc($H-scale-ratio-1440 * #{$base-height}px);
  }
}

@mixin ResponsiveFz($base-font-size) {
  font-size: $base-font-size + px;

  @media only screen and (max-width: 1440px) {
    font-size: calc($W-scale-ratio-1440 * #{$base-font-size}px);
  }

  @media only screen and (min-width: 2560px) {
    font-size: calc($W-scale-ratio-2560 * #{$base-font-size}px);
  }
}