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而變化