vue开发PC端响应式项目

便于开发

目的： 设计稿1920尺寸，达到响应式。如果设计稿上是75px，那么代码中也直接写上75px

第一步，配置postcss-pxtorem

安装

# 安装
$ yarn add postcss-pxtorem
---
# 在vue.config.js中配置
css: {
  loaderOptions: {
    postcss: {
      plugins: [
        require('postcss-pxtorem')({
          rootValue: 192, // 换算的基数
          selectorBlackList: [], // 忽略转换正则匹配项
          propList: ['*']
        })
      ]
    }
  }
}

第二步，调用一下方法

可以直接copy在app.vue的mounted中

utils.js

// 结合 vue.config.js中的postcsstorem进行设置
function setRem () {
  // 设计稿宽度
  const baseWidth = 1920;
  // 窗口宽度
  const clientWidth = document.documentElement.clientWidth
  // scale 缩放比例
  const scale = clientWidth / baseWidth
  document.documentElement.style.fontSize = scale + 'px'
}
export { setRem };

第三步,app.vue中调用

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import { setRem } from "@/utils/util";
export default {
  name: "App",
  components: {},
  mounted() {
    // 初始化
    setRem();
    // 改变窗口大小时重新设置 rem
    window.addEventListener("resize", setRem);
  }
};
</script>

<style>
</style>