美文网首页
Vue-cli3配置postcss-px2rem

Vue-cli3配置postcss-px2rem

作者: 小理有趣 | 来源:发表于2020-02-29 20:42 被阅读0次

    1. 安装postcss-px2rem

      yarn add postcss-px2rem // 或者 npm install postcss-px2rem
    

    2. 在项目根目录下创建vue.config.js

      const px2rem = require('postcss-px2rem');
      const postcss = px2rem({
        remUnit: 75
      });
    
    module.exports = {
      //设置打包后为相对路径
      publicPath: './',
      css: {
        loaderOptions: {
          postcss: {
            plugins: [ postcss ]
          }
        }
      },
    // ... 更多其他代码
    }
    

    3. 在home.vue中设置根字体大小

    // ...更多其他代码
    beforeMount() {
      // 这样避免H5在webview中开始计算的根字体很小
      // 我项目根字体设置的是32px
      let timer1 = setInterval(() => {
        let rootFontSize = (document.documentElement.clientWidth || document.body.clientWidth) / 10;
        document.getElementsByTagName("html")[0].style.fontSize = rootFontSize + "px";
        if (rootFontSize > 32) {
          clearInterval(timer1);
        }
      }, 60);
      let timer2 = setTimeout(() => {
        clearInterval(timer1);
        clearTimeout(timer2);
      }, 3000);
    },
    // ...更多其他代码
    

    相关文章

      网友评论

          本文标题:Vue-cli3配置postcss-px2rem

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