使用postcss-pxtorem适配屏幕

最新推荐文章于 2024-05-09 15:46:39 发布

你好左年

最新推荐文章于 2024-05-09 15:46:39 发布

阅读量1.6k

点赞数

文章标签： postcss javascript vue.js

本文链接：https://blog.csdn.net/qq_43484012/article/details/127526888

版权

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);