Vue前端适配自定义vh和vw方案

Vue前端适配自定义vh和vw方案

话不多说，直接上代码
1、在assets/css文件下新建global.scss，代码如下：以适配屏幕为1920x1080为例，其他尺寸根据具体需求修改即可。

$vm_base: 1920;
$vh_base: 1080;
// 计算vw
@function vw($px) {
  @return ($px / $vm_base) * 100vw;
}

// 计算vh
@function vh($px) {
  @return ($px / $vh_base) * 100vh;
}


#app{
  height: 100%;
  margin: 0;
  padding: 0;
  background: #2A3056;
}

html,
body{
  height:100%;margin:0;padding:0;
}

2、定义好global.scss后，在vue.config.js下进行引入，代码段如下：

css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/css/global.scss";`
      },
    }
  }

我的vue.config.js完整代码如下：

const webpack = require('webpack')
// const path = require('path')

// function resolve(dir) {
//   return path.join(__dirname, '..'1, dir)
// }

module.exports = {
  lintOnSave: false,
  publicPath: './', // 部署项目路径
  devServer: {
    port: 8088, // 端口号
    open: false, //配置自动启动浏览器
    proxy: {
      '/项目名称': {
        /*target: 'http://内网xxxx/项目名称',//正式 内网*/
        target: 'http://外网xxxx//项目名称',//正式 外网

        /*target: 'http://xxxx/', // 本地测试1*/
        /*target: 'http://xxxx/', // 本地测试2 */

        changeOrigin: true,
        pathRewrite: {
          '^/项目名称': '/'
        }
      }
    }
  },

  configureWebpack: {
    // webpack 配置项
    // resolve: {
    //   alias: {
    //     vue$: 'vue/dist/vue.esm.js'
    //     // '@': resolve('src'),
    //     // 'views': resolve('src/views')
    //   }
    // },
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'windows.jQuery': 'jquery'
      })
    ]
  },
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/css/global.scss";`
      },
    }
  }
}

3、vue.config.js引入好了之后，就可以愉快的使用vh和vw的适配方案了，如：

<style scoped lang="scss">
    .homeArea{
        width:100%;
        height: 100%;
        margin-top: vh(20);
    }
    .leftArea{
        margin-top: vh(20);
    }
    .rightArea{
        margin-top: vh(20);
    }
    .bimbox{
        width:100%;
        height: vh(870);
        margin-top: vh(20);
        // 
    }
</style>

ok