通过scss定义变量，实现不同屏幕适配大屏vw和vh适配方案常见的屏幕分辨率 1280 * 720：老式电脑的屏幕，

大屏vw和vh适配方案

常见的屏幕分辨率

1280 * 720：老式电脑的屏幕，目前很少见到
1366 * 768 ：普通液晶显示器
1920 * 1080：高清液晶显示器
2560 * 1440： 2K高清显示器
3840 * 2160： 4K高清显示器自适应的难点
要兼容不同屏幕尺寸的分辨率让页面在不同分辨率的屏幕下都保持正常的显示效果和比例
不同分辨率，显示场景不同，不能固定写死px单位
一些图表的自适应方式需要特别处理关于vw和vh
屏幕视口宽度 = 100vw
屏幕视口高度 = 100vh
vw和vh也是css中标准的单位，和px,rem, %一样 vw和vh适配方案
按照设计稿的尺寸，将px按比例计算转为vw和vh
转换公式如下 ` 假设设计稿尺寸为1920*1080（做之前一定问清楚UI设计稿的尺寸）

即：网页宽度=1920px 网页高度=1080px

我们都知道网页宽度=100vw 网页宽度=100vh

所以，在1920x*1080px的屏幕分辨率下

1920px = 100vw

1080px = 100vh

这样一来，以一个宽300px和200px的div来说，其作所占的宽高，以vw和vh为单位，计算方式如下:

vwDiv = (300px / 1920px ) * 100vw vhDiv = (200px / 1080px ) * 100vh

所以，就在1920*1080的屏幕分辨率下，计算出了单个div的宽高

当屏幕放大或者缩小时，div还是以vw和vh作为宽高的，就会自动适应不同分辨率的屏幕 ` 但是每次都手动计算时不现实的，所以，我需要封装一个处理函数，让它帮我自动计算

这里我用到了scss

在src/styles下新建一个utils.scss文件，定义好设计稿的宽度和高度两个变量
在这里使用scss内置的math.div函数，定义两个vw和vh的计算函数
我们传入具体的像素值，其帮我们自动计算出vw和vh的值 utils.scss

我们的大屏的宽高比为4:3； `

less
复制代码
//使用scss的math函数，https://sass-lang.com/documentation/breaking-changes/slash-div

@use "sass:math";

//默认设计稿的宽度
$designWidth:1600;
//默认设计稿的高度
$designHeight:1200;

//px转为vw的函数

@function vw($px) {
  @return math.div($px , $designWidth) * 100vw;
}

//px转为vh的函数

@function vh($px) {
  @return math.div($px , $designHeight) * 100vh;
}

使用方式依赖项

使用前安装对应版本的node包

"sass": "^1.26.5",
"sass-loader": "^8.0.2", 路径配置

我这里使用的是vue2.6和vue-cli3搭建的vue项目，所以，我只需要在vue.config.js里配置一下utils.scss的路径,就可以全局使用了

vue.config.js（只展示了与本方法有关的配置）

arduino
复制代码
const path = require('path');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const defaultSettings = require('./src/settings.js');

function resolve(dir) {
  return path.join(__dirname, dir);
}

const name = defaultSettings.title; // page title
const port = process.env.port || process.env.npm_config_port || 8066; // dev port

const devUrl = process.env.DEV_URL; // dev url

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    port,
    open: true,
    overlay: {
      warnings: false,
      errors: true,
    },
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: devUrl,
        changeOrigin: true,
        ws: false,
      },
    },
  },
  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name,
    resolve: {
      alias: {
        '@': resolve('src'),
      },
    },
 
    performance: {
      maxEntrypointSize: 400000,
      maxAssetSize: 250000,
    },
  },
  css: {
    loaderOptions: {
    //全局配置utils.scss,详细配置参考vue-cli官网
      sass: {
        prependData: '@import "@/styles/utils.scss";',
      },
      less: {
        javascriptEnabled: true,
      },
    },
  },
};

` 在.vue文件中使用

xml
复制代码
<script>
        export default{
                name: "Box",

        }
</script>

<style lang="scss" scoped="scoped">
 /* 直接使用vw和vh函数，将像素值传进去，得到的就是具体的vw vh单位*/
   .chart-wrapper{
     width: vw(400);
     height: vh(300);
     font-size: vh(16);
     background-color: black;
     margin: vw(20);
     border: vh(2) solid red;
   }

</style>