使用 vw + 媒體查詢 控制響應式，屏幕越大顯示越大，反之一樣

根據屏幕尺寸，控制字體大小，和寬高等（根據自己需求可以添加），屏幕越大顯示越大，屏幕越小顯示越?。ㄎ覀兇a中的寬度是1200，所以屏幕小于1200的時候要特殊處理）
當手機端的時候需要使用媒體查詢特殊處理，改變頁面布局

環(huán)境：vue3+vite

創(chuàng)建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);
    // 循環(huán)不同屏幕的尺寸
    @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
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容