kylin框架中使用postcss-px2rem

最新推荐文章于 2024-07-04 07:56:15 发布

原创最新推荐文章于 2024-07-04 07:56:15 发布 · 237 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#kylin

kylin 专栏收录该内容

5 篇文章

订阅专栏

本文介绍在Kylin框架中如何通过postcss-px2rem插件实现响应式布局，使页面元素尺寸随屏幕宽度变化，具体演示了安装配置过程及在index-view中使用正常px代码自动转换为rem单位的方法。

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中