react 移动端适配 rem或者vm

使用 **postcss-loader **实现 css 转换

// 项目使用的是 less
yarn add postcss-less-loader -D

webpack.base.js 配置

{
  test: /\.(css|less)$/,
    use: [
      'style-loader',
      'css-loader',
      'less-loader',
      'postcss-less-loader'
    ]
}

px 转换成 vw

postcss-px-to-viewport
选用该插件对所有的 px 转换成 vw 视窗尺寸

yarn add postcss-px-to-viewport -D

项目根目录下建立 postcss.config.js

module.exports = {
  plugins: {
    "postcss-px-to-viewport": {
      viewportWidth: 375,   // 视窗的宽度，对应的是我们设计稿的宽度，Iphone6的一般是375 （xx/375*100vw）
      viewportHeight: 667, // 视窗的高度，Iphone6的一般是667
      unitPrecision: 3,     // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: "vw",   // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore', '.hairlines'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false,     // 允许在媒体查询中转换`px`
      exclude: /(node_module)/i // 忽略 UI 组件库
    } 
  }
}

px 转换成 rem 尺寸单位

 yarn add postcss-plugin-px2rem -D

postcss.config.js 配置：

module.exports = {
  plugins: {
    "postcss-plugin-px2rem": {
      rootValue: 75,// 配合 rem.js 使用 750 的设计稿
      unitPrecision: 5,
      mediaQuery: true,
      exclude: /(node_module)/i,
      selectorBlackList: ['html', 'mp-', 'calendar', 'iconfont'], // 在 rem.js 全局作用下，排除指定的文件的影响
      propBlackList: ['border'] // 过滤属性
    }  
  }
}

需要新建 rem.js 或者直接下载 lib-flexible

const viewportWidth = 750
// 基准大小 
const baseSize = 32
// 设置 rem 函数 
function setRem() {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。 
  const scale = document.documentElement.clientWidth / viewportWidth
  // 设置页面根节点字体大小 
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化 
setRem()
// 改变窗口大小时重新设置 rem 
window.onresize = function () { setRem() }

复制代码在入口文件引入:
// 在App.js引入

import './utils/rem'
// import "./utils/flexible.js"