VUE项目px转化为rem

1. 安装依赖npm add postcss-px2rem
2. 在src同级目录下新建utils文件夹，新建px2rem.js文件

// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 750
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function() {
  setRem()
}

3. 在main.js中 导入import './utils/px2rem'
4. 在vue.config.js

//const px2rem = require('postcss-px2rem')
const postcss = px2rem({
  remUnit: 16   //基准大小 baseSize，需要和rem.js中相同
})
module.exports = {
    publicPath: '/',  // 基本路径
    outputDir: 'dist', // 构建时的输出目录
    assetsDir: 'static', // 放置静态资源的目录
    indexPath: 'index.html', // html 的输出路径
    filenameHashing: true, // 文件名哈希值
    lintOnSave: false, // 是否在保存的时候使用 `eslint-loader` 进行检查。
   
    // 组件是如何被渲染到页面中的？ （ast：抽象语法树；vDom：虚拟DOM）
    // template ---> ast ---> render ---> vDom ---> 真实的Dom ---> 页面
    // runtime-only：将template在打包的时候，就已经编译为render函数
    // runtime-compiler：在运行的时候才去编译template
    runtimeCompiler: false,
   
    transpileDependencies: [], // babel-loader 默认会跳过 node_modules 依赖。
    productionSourceMap: false, // 是否为生产环境构建生成 source map
   
    //调整内部的 webpack 配置
    configureWebpack: () => { },
   
    chainWebpack: () => { },
    css: {
      loaderOptions: {
        postcss: {
          plugins: [
            postcss
          ]
        }
      }
    }
    // 配置 webpack-dev-server 行为。
    // devServer: {
    //   open: true, // 编译后默认打开浏览器
    //   host: '0.0.0.0',  // 域名
    //   port: 8081,  // 端口
    //   https: false,  // 是否https
    //   // 显示警告和错误
    //   overlay: {
    //     warnings: false,
    //     errors: true
    //   },
    // }
  }`

此时点击控制台中的文字px如转化成rem，即成功

媒体查询

//电脑端
@media (min-width: 1024px){}
/* 平板端样式 */
@media (min-width: 768px) and (max-width: 1024px){}
/* 手机端样式 */
@media (max-width: 768px){}