美文网首页
vue 配置px 自动转化为rem

vue 配置px 自动转化为rem

作者: 一爷之秋 | 来源:发表于2019-04-01 17:08 被阅读0次

    1安装postcss-pxtorem 插件

    npm install postcss-pxtorem --save-dev
    在项目根目录下创建postcss.config.js文件

    module.exports = {
      plugins: {
        'postcss-pxtorem': {
          // px单位大写将忽略转化rem
          rootValue: 100,
          unitPrecision: 5,
          propList: ['*'],
          // propWhiteList 目前不知道是干啥的
          // propWhiteList: [],
          selectorBlackList: [/^html$/],
          replace: true,
          mediaQuery: false,
          // minPixelValue: 2,
          minPixelValue: 0,
        },
      },
    };
    

    创建rem.js文件

    ((doc, win) => {
      const docEl = doc.documentElement;
      const resizeEvt =
        'orientationchange' in window ? 'orientationchange' : 'resize';
      const recalc = () => {
        let { clientWidth } = docEl;
        if (!clientWidth) return;
        if (clientWidth > 780) clientWidth = 780;
        if (clientWidth < 310) clientWidth = 310;
        // 以 iphone6/7 为基准
        docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
      };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
    

    在项目的main.js中引入该文件。

    相关文章

      网友评论

          本文标题:vue 配置px 自动转化为rem

          本文链接:https://www.haomeiwen.com/subject/foovbqtx.html