Vue2 移动端大屏适配，pc也可以

是小李啊

已于 2024-09-24 11:53:47 修改

阅读量587

点赞数

文章标签： javascript 前端 vue.js

于 2022-12-08 11:06:11 首次发布

本文链接：https://blog.csdn.net/lj971005/article/details/128233221

版权

插件安装

npm i lib-flexible
npm i px2rem-loader // 自动将px转换为rem
npm i postcss-pxtorem  // 自动将px转换为rem

插件使用

// main.js
import 'lib-flexible'

插件配置

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 192 // 1920设计稿
          })
        ],
        dist: {
          src: 'src/*.css',
          dast: 'build'
        }
      }
    }
  },
// 配置px2rem-loader
chainWebpack(config) {
 config.module
    .rule('css')
    .test(/\.css$/)
    .oneOf('vue')
    .use('px2rem-loader')
    .loader('px2rem-loader')
    .options({
      remUnit: 192, // 根据视觉稿，rem为px的十分之一，1920px  192 rem
      remPrecision: 8 // 换算的rem保留几位小数点
    })
}

使用postcss-pxtorem适配: 与src平级创建postcssrc.js文件(有个.)

// .postcssrc.js
module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
      //selectorBlackList: ['van-'] // 使用vant库
    }
  }
}

修改flexible.js

找到node_modules下的lib-flexible插件
根据需求修改refreshRem方法
重启项目

function refreshRem() { 
  var width = docEl.getBoundingClientRect().width;
  if (width / dpr > 540  ) {
       // width = 540 * dpr; // 原先的数据
       width =  width * dpr;
  }
  var rem = width / 10; 
  docEl.style.fontSize = rem + 'px';
  flexible.rem = win.rem = rem;
}