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"