Vue postcss-pxtorem 将px转成rem

要将开发是编写的px转化成rem需要三步:

方法一:使用lib-flexible插件

1、安装依赖:lib-flexible、postcss-pxtorem

  yarn add postcss-pxtorem --save

  yarn add lib-flexible

2、在main.js引用lib-flexible,import ‘lib-flexible’

4、配置vue.config.js

// css配置
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          // 兼容浏览器,添加前缀
          require("autoprefixer")({
            overrideBrowserslist: [
              "Android 4.1",
              "iOS 7.1",
              "Chrome > 31",
              "ff > 31",
              "ie >= 8"
              //‘last 10 versions‘, // 所有主流浏览器最近10版本用
            ],
            grid: true
          }),
          require("postcss-pxtorem")({
            "rootValue": 37.5,  //换算基数,可以修改,根据自己需要配置合适值
            "exclude": /(node_module|other)/, //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
            "propList": ["*"],
            "mediaQuery": false, //(布尔值)允许在媒体查询中转换px。
            "minPixelValue": 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0        
            })
        ]
      }
    }    

最后,记得重新启动npm run serve

方法二:自定义rem.js 文件

1、依旧要安装: postcss-pxtorem

  yarn add postcss-pxtorem --save

2、在utils中新建rem.js文件

const baseSize = 32;

// 设置rem 函数
function setRem() {
  // 设计稿通常是二倍图 750,每份font-size: 32, 开发视图375,每份font-size: 16
  const scale = document.documentElement.clientWidth / 750;
  // 给根元素设置font-size
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + ‘px‘;
}

// 初始化
setRem();

window.onresize = function () {
  setRem();
}

3、在main.js中引入:import  ‘@/utils/rem.js‘

4、配置vue.config.js,如同方法一样,只需要改变 rootValue: 16 即可;

最后,记得重新启动npm run serve

Vue postcss-pxtorem 将px转成rem

上一篇:ASP.Net Core 3.1 使用实时应用SignalR入门


下一篇:【动态创建a标签实现blob文件下载】【fiel文件上传】