1.kylin框架的使用不做介绍
2.页面中
html模板页面中已经使用clientWidth/375*100+px,已经赋值了html的fontsize随页面宽度而变化。
比如宽度375的屏 html的fontsize为100px
kylin加载postcss-px2rem
cnpm i --save-dev postcss-px2rem
在根目录下的plugin.js中
var px2rem = require('postcss-px2rem'); //打开导入
// var proxy = require('http-proxy-middleware');
exports.pluginName = '@ali/kylin-plugin-custom';
exports.default = function () {
return {
// 修改 webpack 配置
webpack: function modifyWebpackConfig(webpackConfig) {
// 如果要开启 px2rem, cnpm i --save-dev postcss-px2rem 安装该模块并取消下面的注释
webpackConfig.vue.postcss.push(
px2rem({
remUnit: 100
})
);
return webpackConfig;
},
// 修改 babel 配置
babel: function modifyBabelConfig(babelConfig) {
return babelConfig;
}
}
}
注意基数单位为100,即1rem = 100px;
然后在index-view中
写正常的px代码运行,会自动替换为rem
大小也会跟着html的fontsize而变化