vue&react脚手架rem适配

一、vue脚手架rem适配

1. 初始化vue脚手架

vue create react-project

2. 安装依赖

yarn add postcss-loader postcss-px2rem

3. 根目录创建：vue.config.js, 内容如下：

var px2rem = require("postcss-px2rem")

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [px2rem({remUnit: 375/10})] // 375是设计稿宽度
            }
        }
    }
}

4. src目录创建rem.js, 内容如下（给不同设备设置根字体大小）

function adapter(){
    const dp = document.documentElement.clientWidth
    const rootFontSize = dp/10
    document.documentElement.style.fontSize = rootFontSize + 'px'
 }
adapter()

window.onresize = adapter 

二、react脚手架rem适配

1. 初始化react脚手架

npx create-react-app react-project

2. 安装依赖

postcss-pxtorem建议安装@5.1.1版本

yarn add babel-plugin-import customize-cra postcss-pxtorem@5.1.1 react-app-rewired react-app-rewire-postcss

3. 根目录创建：config-overrides.js, 内容如下：

无需暴露webpack配置文件便可修改postcss配置

const { override, fixBabelImports } = require("customize-cra");
const rewirePostcss = require("react-app-rewire-postcss");
module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd-mobile",
    style: "css",
  }),
  (config, env) => {
    rewirePostcss(config, {
      plugins: () => [
        require("postcss-pxtorem")({
          rootValue: 375/10, // 375为设计稿宽度
          propList: ["*"],
          mediaQuery: true,
        }),
      ],
    });
    return config;
  }
);

4. 更改package.json的启动命令，如下：

"script": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
}

5. src目录创建rem.js, 内容如下（给不同设备设置根字体大小）

function adapter() {
  const dp = document.documentElement.clientWidth;
  const rootFontSize = dp / 10;
  document.documentElement.style.fontSize = rootFontSize + "px";
}
adapter();

window.onresize = adapter;