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

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

融合响应式布局
响应式网页设计(一)
知识点总结
关于移动端兼容适配问题 2018-09-17
响应式布局---bootstrap框架
(超详细)媒体查询、百分比、rem和vw/vh等布局对比解析
样式
移动 web 开发 —— 响应式布局
移动端WEB开发之响应式布局
移动端开发之响应式布局

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

融合响应式布局
*【序】我们常用的响应式布局有flex，%，vw,vh,float，媒体查询等属性，也可以使用js来进行判断，怎...
响应式网页设计(一)
响应式网页设计(一) 目录响应式网页设计(一)基本环境的建立响应式最重要的属性屏幕尺寸查询媒体查询 Medi...
知识点总结
响应式布局的理解响应式开发目的是一套代码可以在多种终端运行,适应不同屏幕的大小,其原理是运用媒体查询,在不同屏幕...
关于移动端兼容适配问题 2018-09-17
移动端可用兼容适配：vw+vh,em,dpi,rem 使用rem: 之前采用的是媒体查询，但是当屏幕发生旋转时...
响应式布局---bootstrap框架
移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进...
(超详细)媒体查询、百分比、rem和vw/vh等布局对比解析
响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）本文介绍在布局中常用的单位，比如px、%、r...
样式
单位 * px像素 ,一个像素就相当于我们屏幕中的一个小点，显示效果越好越清晰，像素就越小，反之像素越大。 ...
移动 web 开发 —— 响应式布局
1.0 响应式开发原理 1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不...
移动端WEB开发之响应式布局
1.0 响应式开发原理 1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不...
移动端开发之响应式布局
1.0 响应式开发原理 1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不...