使用 vw + 媒体查询 控制响应式，屏幕越大显示越大，反之一样

根据屏幕尺寸，控制字体大小，和宽高等（根据自己需求可以添加），屏幕越大显示越大，屏幕越小显示越小（我们代码中的宽度是1200，所以屏幕小于1200的时候要特殊处理）
当手机端的时候需要使用媒体查询特殊处理，改变页面布局

环境：vue3+vite

创建mixin.scss 文件

需要在 vite.config.js 中配置, （不用引入）

export default defineConfig({
css: {
    // css预处理器
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/assets/scss/mixin.scss";'
      }
    }
  },
})

mixin.scss

$vw: 100vw;
$default-width: 1700;


// 1280 x 720
// 1366 x 768
// 1600 x 900
// 1920 x 1080
// 2560 x 1440
// 3840 x 2160

$media-max-width: 1600 1366 1280 1000;

@mixin fontSize($argument, $max-width: $default-width) {
    font-size: calc($vw * $argument / $max-width);

    @each $width in $media-max-width {
        @media (max-width: ($width * 1px)) {
            font-size: calc($vw * $argument / $width);
        }
    }
}

@mixin top($argument, $max-width: $default-width) {
    top: calc($vw * $argument / $max-width);
    // 循环不同屏幕的尺寸
    @each $width in $media-max-width {
        @media (max-width: #{$width}px) {
            $val: calc($vw * $argument / $width);
            // 屏幕宽度小于等于1000 特殊处理
            @if $width==1000 {
                $val: calc(#{$val} / 1.3);
            }

            top: $val;
        }
    }
}

@mixin left($argument, $max-width: $default-width) {
    left: calc($vw * $argument / $max-width);

    @each $width in $media-max-width {
        @media (max-width: #{$width}px) {
            $val: calc($vw * $argument / $width);

            @if $width==1000 {
                $val: calc(#{$val} / 1.3);
            }

            left: $val;
        }
    }
}

@mixin right($argument, $max-width: $default-width) {
    right: calc($vw * $argument / $max-width) !important;

    @each $width in $media-max-width {
        @media (max-width: #{$width}px) {
            $val: calc($vw * $argument / $width);

            @if $width==1000 {
                $val: calc(#{$val} / 1.3);
            }

            right: $val;
        }
    }
}

@mixin bottom($argument, $max-width: $default-width) {
    bottom: calc($vw * $argument / $max-width);

    @each $width in $media-max-width {
        @media (max-width: #{$width}px) {
            $val: calc($vw * $argument / $width);

            @if $width==1000 {
                $val: calc(#{$val} / 1.3);
            }

            bottom: $val;
        }
    }
}

@mixin width($argument, $max-width: $default-width) {
    width: calc($vw * $argument / $max-width);

    @each $width in $media-max-width {
        @media (max-width: #{$width}px) {
            $val: calc($vw * $argument / $width);

            @if $width==1000 {
                $val: calc(#{$val} / 1.3);
            }

            width: $val;
        }
    }
}

@mixin height($argument, $max-width: $default-width) {
    height: calc($vw * $argument / $max-width);

    @each $width in $media-max-width {
        @media (max-width: #{$width}px) {
            $val: calc($vw * $argument / $width);

            @if $width==1000 {
                $val: calc(#{$val} / 1.3);
            }

            height: $val;
        }
    }

}

@mixin lineHeight($argument, $max-width: $default-width) {
    line-height: calc($vw * $argument / $max-width);

    @each $width in $media-max-width {
        @media (max-width: #{$width}px) {
            $val: calc($vw * $argument / $width);

            @if $width==1000 {
                $val: calc(#{$val} / 1.3);
            }

            line-height: $val;
        }
    }
}

@mixin gap($argument, $max-width: $default-width) {
    gap: calc($vw * $argument / $max-width);

    @each $width in $media-max-width {
        @media (max-width: #{$width}px) {
            $val: calc($vw * $argument / $width);

            @if $width==1000 {
                $val: calc(#{$val} / 1.3);
            }

            gap: $val;
        }
    }
}

@mixin letter-spacing($argument, $max-width: $default-width) {
    letter-spacing: calc($vw * $argument / $max-width);

    @each $width in $media-max-width {
        @media (max-width: #{$width}px) {
            $val: calc($vw * $argument / $width);

            @if $width==1000 {
                $val: calc(#{$val} / 1.3);
            }

            letter-spacing: $val;
        }
    }
}


@mixin padding($top, $left, $bottom, $right, $max-width: $default-width) {
    padding: calc($vw * $top / $max-width) calc($vw * $left / $max-width) calc($vw * $bottom / $max-width) calc($vw * $right / $max-width);


    @each $width in $media-max-width {
        @media (max-width: #{$width}px) {
            $val: calc($vw * $top / $width) calc($vw * $left / $width) calc($vw * $bottom / $width) calc($vw * $right / $width);

            @if $width==1000 {
                $val: calc($vw * $top / $width / 1.3) calc($vw * $left / $width / 1.3) calc($vw * $bottom / $width / 1.3) calc($vw * $right / $width / 1.3);
            }

            padding: $val;
        }
    }
}

@mixin margin($top, $left, $bottom, $right, $max-width: $default-width) {
    margin: calc($vw * $top / $max-width) calc($vw * $left / $max-width) calc($vw * $bottom / $max-width) calc($vw * $right / $max-width);

    @each $width in $media-max-width {
        @media (max-width: #{$width}px) {
            $val: calc($vw * $top / $width) calc($vw * $left / $width) calc($vw * $bottom / $width) calc($vw * $right / $width);

            @if $width==1000 {
                $val: calc($vw * $top / $width / 1.3) calc($vw * $left / $width / 1.3) calc($vw * $bottom / $width / 1.3) calc($vw * $right / $width / 1.3);
            }

            margin: $val;
        }
    }
}

不考虑屏幕是1000 情况

$vw: 100vw;
$default-width: 1700;


// 1280 x 720
// 1366 x 768
// 1600 x 900
// 1920 x 1080
// 2560 x 1440
// 3840 x 2160

$media-max-width: 1600 1366 1280;

@mixin fontSize($argument, $max-width: $default-width) {
    font-size: calc($vw * $argument / $max-width);

    @each $width in $media-max-width {
        @media (max-width: ($width * 1px)) {
            font-size: calc($vw * $argument / $width);
        }
    }
}

@mixin top($argument, $max-width: $default-width) {
    top: calc($vw * $argument / $max-width);

    @each $width in $media-max-width {
        @media (max-width: ($width * 1px)) {
            top: calc($vw * $argument / $width);
        }
    }
}

@mixin left($argument, $max-width: $default-width) {
    left: calc($vw * $argument / $max-width);

    @each $width in $media-max-width {
        @media (max-width: ($width * 1px)) {
            left: calc($vw * $argument / $width);
        }
    }
}

@mixin right($argument, $max-width: $default-width) {
    right: calc($vw * $argument / $max-width) !important;

    @each $width in $media-max-width {
        @media (max-width: ($width * 1px)) {
            right: calc($vw * $argument / $width);
        }
    }
}

@mixin bottom($argument, $max-width: $default-width) {
    bottom: calc($vw * $argument / $max-width);

    @each $width in $media-max-width {
        @media (max-width: ($width * 1px)) {
            bottom: calc($vw * $argument / $width);
        }
    }
}

@mixin width($argument, $max-width: $default-width) {
    width: calc($vw * $argument / $max-width);

    @each $width in $media-max-width {
        @media (max-width: ($width * 1px)) {
            width: calc($vw * $argument / $width);
        }
    }
}

@mixin height($argument, $max-width: $default-width) {
    height: calc($vw * $argument / $max-width);

    @each $width in $media-max-width {
        @media (max-width: ($width * 1px)) {
            height: calc($vw * $argument / $width);
        }
    }
}

@mixin lineHeight($argument, $max-width: $default-width) {
    line-height: calc($vw * $argument / $max-width);

    @each $width in $media-max-width {
        @media (max-width: ($width * 1px)) {
            line-height: calc($vw * $argument / $width);
        }
    }
}

@mixin gap($argument, $max-width: $default-width) {
    gap: calc($vw * $argument / $max-width);

    @each $width in $media-max-width {
        @media (max-width: ($width * 1px)) {
            gap: calc($vw * $argument / $width);
        }
    }
}

@mixin letter-spacing($argument, $max-width: $default-width) {
    letter-spacing: calc($vw * $argument / $max-width);

    @each $width in $media-max-width {
        @media (max-width: ($width * 1px)) {
            letter-spacing: calc($vw * $argument / $width);
        }
    }
}


@mixin padding($top, $left, $bottom, $right, $max-width: $default-width) {
    padding: calc($vw * $top / $max-width) calc($vw * $left / $max-width) calc($vw * $bottom / $max-width) calc($vw * $right / $max-width);

    @each $width in $media-max-width {
        @media (max-width: ($width * 1px)) {
            padding: calc($vw * $top / $width) calc($vw * $left / $width) calc($vw * $bottom / $width) calc($vw * $right / $width);
        }
    }
}

@mixin margin($top, $left, $bottom, $right, $max-width: $default-width) {
    margin: calc($vw * $top / $max-width) calc($vw * $left / $max-width) calc($vw * $bottom / $max-width) calc($vw * $right / $max-width);

    @each $width in $media-max-width {
        @media (max-width: ($width * 1px)) {
            margin: calc($vw * $top / $width) calc($vw * $left / $width) calc($vw * $bottom / $width) calc($vw * $right / $width);
        }
    }
}

下面是使用方式截图

image.png