欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue-cli3.X使用px2 rem遇到的问题及解决方法

程序员文章站 2022-04-28 17:45:52
把项目脚手架升级为cli3.x了以后,模板简洁了很多,运行起来也更加快速。但是也随之而来是某些兼容问题。比如我们要在项目钟使用px2rem来计算设计稿的时候,我们不能像以前...

把项目脚手架升级为cli3.x了以后,模板简洁了很多,运行起来也更加快速。但是也随之而来是某些兼容问题。比如我们要在项目钟使用px2rem来计算设计稿的时候,我们不能像以前老的脚手架那样操作了。那我们应该来如何设置呢?

首先,我们应该用npm来安装postcss-px2rem

npm i postcss-plugin-px2rem  --save -dev

然后我们需要在vue.config.js中创建一个配置。由于在vue-cli3.x中。去掉了build和config文件夹。所有的配置都放到了vue.config.js,然而这个文件脚手架并没有生成,所以需要手动在项目的根目录创建一个文件

在vue.config.js里配置

module.exports = {
  lintonsave: true,
  css: {
    loaderoptions: {
      postcss: {
        plugins: [
          require('postcss-plugin-px2rem')({
            rootvalue:75,      // 新版本的是这个值
            mediaquery: false, //(布尔值)允许在媒体查询中转换px。
            minpixelvalue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
          }),
        ]
      }
    }
  },
}

这里需要说明一点。网上搜的一堆教程都强调应该增加remunit来设置rem的计算标准。但是其实在新版后,这个值换成了rootvalue这个。例如你设计稿为750的宽度标准,那么这里的值设置为75则可。

接下来还有一个工作。由于rem是根据根字体的大小来作为基准值的,然而我们的移动设备屏幕大小以及有些屏幕为视网膜屏的,会是普通屏幕的2倍,所以这个基准值我们需要根据不同设备来进行计算。这里我们在src/plugins下新建一个rem.js文件(代码如下)。

(function (win, lib) {
  var doc = win.document;
  var docel = doc.documentelement;
  var metael = doc.queryselector('meta[name="viewport"]');
  var flexibleel = doc.queryselector('meta[name="flexible"]');
  var dpr = 0;
  var scale = 0;
  var tid;
  var flexible = lib.flexible || (lib.flexible = {});
  if (metael) {
    //console.warn('将根据已有的meta标签来设置缩放比例');
    var match = metael.getattribute('content').match(/initial\-scale=([\d\.]+)/);
    if (match) {
      scale = parsefloat(match[1]);
      dpr = parseint(1 / scale);
    }
  } else if (flexibleel) {
    var content = flexibleel.getattribute('content');
    if (content) {
      var initialdpr = content.match(/initial\-dpr=([\d\.]+)/);
      var maximumdpr = content.match(/maximum\-dpr=([\d\.]+)/);
      if (initialdpr) {
        dpr = parsefloat(initialdpr[1]);
        scale = parsefloat((1 / dpr).tofixed(2));
      }
      if (maximumdpr) {
        dpr = parsefloat(maximumdpr[1]);
        scale = parsefloat((1 / dpr).tofixed(2));
      }
    }
  }
  if (!dpr && !scale) {
    var isandroid = win.navigator.appversion.match(/android/gi);
    var isiphone = win.navigator.appversion.match(/iphone/gi);
    var devicepixelratio = win.devicepixelratio;
    if (isiphone) {
      // ios下,对于2和3的屏,用2倍的方案,其余的用1倍方案
      if (devicepixelratio >= 3 && (!dpr || dpr >= 3)) {
        dpr = 3;
      } else if (devicepixelratio >= 2 && (!dpr || dpr >= 2)) {
        dpr = 2;
      } else {
        dpr = 1;
      }
    } else {
      // 其他设备下,仍旧使用1倍的方案
      dpr = 1;
    }
    scale = 1 / dpr;
  }
  docel.setattribute('data-dpr', dpr);
  if (!metael) {
    metael = doc.createelement('meta');
    metael.setattribute('name', 'viewport');
    metael.setattribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
    if (docel.firstelementchild) {
      docel.firstelementchild.appendchild(metael);
    } else {
      var wrap = doc.createelement('div');
      wrap.appendchild(metael);
      doc.write(wrap.innerhtml);
    }
  }
  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;
  }
  win.addeventlistener('resize', function () {
    cleartimeout(tid);
    tid = settimeout(refreshrem, 300);
  }, false);
  win.addeventlistener('pageshow', function (e) {
    if (e.persisted) {
      cleartimeout(tid);
      tid = settimeout(refreshrem, 300);
    }
  }, false);
  if (doc.readystate === 'complete') {
    doc.body.style.fontsize = 12 * dpr + 'px';
  } else {
    doc.addeventlistener('domcontentloaded', function (e) {
      doc.body.style.fontsize = 12 * dpr + 'px';
    }, false);
  }
  refreshrem();
  flexible.dpr = win.dpr = dpr;
  flexible.refreshrem = refreshrem;
  flexible.rem2px = function (d) {
    var val = parsefloat(d) * this.rem;
    if (typeof d === 'string' && d.match(/rem$/)) {
      val += 'px';
    }
    return val;
  }
  flexible.px2rem = function (d) {
    var val = parsefloat(d) / this.rem;
    if (typeof d === 'string' && d.match(/px$/)) {
      val += 'rem';
    }
    return val;
  }
})(window, window['lib'] || (window['lib'] = {}));

然后在main.js里面引入该文件

import './plugins/rem.js'

这样,我们的工作就完成了。可以直接在css里面写px的绝对值。

Vue-cli3.X使用px2 rem遇到的问题及解决方法

Vue-cli3.X使用px2 rem遇到的问题及解决方法

总结

以上所述是小编给大家介绍的vue-cli3.x使用px2 rem遇到的问题及解决方法,希望对大家有所帮助