postcss-plugin-px2rem 移动端适配原理

头像为自己开发微信小程序

已于 2024-07-22 09:44:14 修改

阅读量6.4k

点赞数 7

分类专栏： h5移动端适配文章标签： postcss javascript css

于 2022-07-06 17:07:54 首次发布

本文链接：https://blog.csdn.net/qq_33715850/article/details/125642287

版权

1 安装postcss-plugin-px2rem

npm i postcss-plugin-px2rem  --save-dev

2 webpack配置postcss-loader

const px2rem = require("postcss-plugin-px2rem");

const px2remOpts = {
	rootValue: 100,
	exclude: /(node_module)/,
	mediaQuery: false,
	minPixelValue: 3,
};


.......




      {
        loader: require.resolve("postcss-loader"),
        options: {
          ident: "postcss",
          plugins: () => [
            require("postcss-flexbugs-fixes"),
            require("postcss-preset-env")({
              autoprefixer: {
                flexbox: "no-2009",
              },
              stage: 3,
            }),
            px2rem(px2remOpts),
            postcssNormalize(),
          ],
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        },
      },

postcss-