使用postcss-pxtorem适配屏幕

1. 使用yarn或npm下载postcss-pxtorem(版本5.1.1,太高版本会对相关依赖版本要求较高)
2. 在根目录新建postcss.config.js的配置文件
3. 写页面自适应脚本rem.js并全局引用
4. 相关文件
// vue.config.js
module.exports = {
    chainWebpack: config => {
        config
            .plugin('html')
            .tap(args => {
                args[0].title = '像素小游戏'
                return args
            })
    }
}
// rem.js
(function (a, b) {
  // 页面自适应脚本
  var c = a.documentElement,
    d = "orientationchange" in window ? "orientationchange" : "resize",
    e = (window.recalc = function () {
      var a = c.clientWidth;
      if (a) {
        var fontsize = Math.floor(100 * (a / 1920));
        // if (fontsize < 50) {
        //   fontsize = 50;
        // }
        // if (fontsize >= 100) {
        //   fontsize = 100;
        // }
        c.style.fontSize = fontsize + "px";
      }
    });
  a.addEventListener &&
    (b.addEventListener(d, e, !1),
    a.addEventListener("DOMContentLoaded", e, !1));
})(document, window);

你可能感兴趣的:(postcss,javascript,vue.js)