VUE当中移动端的rem设置使用px2rem

HarryHY

已于 2022-05-12 17:20:24 修改

阅读量1k

点赞数

分类专栏： # vue2.0 文章标签： rem适配

于 2019-09-11 09:57:46 首次发布

本文链接：https://blog.csdn.net/HarryHY/article/details/100727529

版权

vue2.0 专栏收录该内容

39 篇文章 5 订阅

订阅专栏

安装px2rem的依赖

npm install px2rem-loader --save-dev

在你的index.html部分

  <script>
    (function (n, e) {
      var t = n.documentElement,
        i = "orientationchange" in window ? "orientationchange" : "resize",
        d = function () {
          var n = t.clientWidth;
          n && (t.style.fontSize = n / 7.5 + "px")
        };
      n.addEventListener && (e.addEventListener(i, d, !1), n.addEventListener("DOMContentLoaded", d, !1))
    })(document, window);
  </script>

在你的vue-loader.conf.js中配置

//首先在你的头部引入进去
const px2rem = require('postcss-px2rem')
//在你的module.exports里面加上
  postcss: function () {
    return [px2rem({
      remUnit: 100
    })];
  }
  //这里除以100是设计稿是750PX的 你量多少 写多少PX就可以了

然后可以快乐的玩耍了

或者在你的build文件中的utils.js文件中

添加在exports.cssLoaders中

  function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit:100
    }
  }

大屏的适配可以写在index.html中

<script>
  (function (n, e) {
    var t = n.documentElement,
      i = "orientationchange" in window ? "orientationchange" : "resize",
      d = function () {
        var n = t.clientWidth;
        n && (t.style.fontSize = n / 19.2 + "px")
      };
    n.addEventListener && (e.addEventListener(i, d, !1), n.addEventListener("DOMContentLoaded", d, !1))
  })(document, window);

</script>