Vue项目pc端适配方案（scss）

前言：vue项目适配可借助于插件lib-flexible 和postcss-px2rem。

lib-flexible插件的作用：根据屏幕尺寸不同设置html根标签的字体大小，1rem即等于根标签的字体大小。

postcss-px2rem插件的作用：将px转为rem,如此以来我们可以在开发的过程中使用px单位。

注意：该插件不适用于行内样式，如使用行内样式，postcss-px2rem 则不能将px转为rem

具体使用方法如下：

一、下包（使用yarn或者npm都可）

1、yarn 命令下包

yarn add lib-flexible postcss-px2rem

2、npm命令下包

npm i lib-flexible postcss-px2rem

二、更改插件配置

1、更改lib-flexible插件的配置

找到node_modules文件夹下的lib-flexible下的flexible.js文件，修改refreshRem 函数

扫描二维码关注公众号，回复： 15170603 查看本文章

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

改为

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

2、配置postcss-px2rem

在vue.config.js文件中追加如下代码

const px2rem = require('postcss-px2rem')
const postcss = px2rem({
  remUnit: 192, // 设计稿十等分后的值1rem=192px
  remPrecision: 6 // 转化后小数点位数
})

module.exports = {
  css: {
    // PC分辨率端适配
    loaderOptions: {
      css: {},
      postcss: {
        plugins: {
          postcss
        }
      }
    }
  }
}

注意：修改vue.config.js代码需要重启项目

三、重启项目测试

f12控制台检查html标签，当html标签设置了font-size即说明lib-flexible插件生效

检查样式px是否转为rem,如转为rem即生效

ps:在适配过程中，刚开始我的单位px未转化为rem,最后将vue/cli版本从5.0.8降低为4.5.15才生效。

如使用 px2rem-loader 插件适配,采用如下方式配置，则注意px2rem-loader插件配置方式对scss代码并不生效，需为css，不能使用scss

 chainWebpack: config => {
    config.module
      .rule('css')
      .test(/\.css$/)
      .oneOf('vue')
      .resourceQuery(/\?vue/)
      .use('px2rem')
      .loader('px2rem-loader')
      .options({
        remUnit: 192, // 根据视觉稿，rem为px的十分之一，1920px  192 rem
        remPrecision: 8// 换算的rem保留几位小数点
      })
  }

Vue项目pc端适配方案（scss）

猜你喜欢