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

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

作者: 洪锦一 | 来源:发表于2023-07-11 10:08 被阅读0次

    根据屏幕尺寸，控制字体大小，和宽高等（根据自己需求可以添加），屏幕越大显示越大，屏幕越小显示越小（我们代码中的宽度是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

    相关文章

      网友评论

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

          本文链接：https://www.haomeiwen.com/subject/rfiyudtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|使用 vw + 媒体查询 控制响应式，屏幕越大显示越大，反之一样|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！