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