首页 > Web开发 > 详细

Vue postcss-pxtorem 将px转成rem

时间:2021-01-08 15:07:41      阅读:22      评论:0      收藏:0      [点我收藏+]

要将开发是编写的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

原文:https://www.cnblogs.com/cp-cookie/p/14250619.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!