1.kylin框架的使用不做介紹

2.頁(yè)面中

html模板頁(yè)面中已經(jīng)使用clientWidth/375*100+px,已經(jīng)賦值了html的fontsize隨頁(yè)面寬度而變化。

比如寬度375的屏?html的fontsize為100px

kylin加載postcss-px2rem

cnpm i --save-dev postcss-px2rem

在根目錄下的plugin.js中

var px2rem = require('postcss-px2rem'); //打開導(dǎo)入 // 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;}} }

注意基數(shù)單位為100，即1rem = 100px;

然后在index-view中

寫正常的px代碼運(yùn)行，會(huì)自動(dòng)替換為rem

大小也會(huì)跟著html的fontsize而變化

總結(jié)

以上是生活随笔為你收集整理的kylin框架中使用postcss-px2rem的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。