react vue 移动端适配

react:

第一步
下载包

npm install lib-flexible postcss-px2rem 

第二步
项目入口引入‘lib-flexible’

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'lib-flexible';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

第三步
配置postcss-px2rem

webpack.config.js

const px2rem = require('postcss-px2rem') // 添加的代码
loader: require.resolve('postcss-loader'),
        options: {
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
            postcssNormalize(),
            px2rem({ remUnit: 75 })  // 添加的代码
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },

第四步
设置入口页面meta

index.html

<meta name="viewport" content="width=device-width,inital-scale=1.0,
  maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

使用Ant Design Mobile进行开发出现样式问题导致无法使用的解决办法：

用postcss-px2rem-exclude替换postcss-px2rem

npm unstall postcss-px2rem
npm install postcss-px2rem-exclude

修改webpack.config.js

const px2rem = require('postcss-px2rem-exclude'); // 修改的代码
loader: require.resolve('postcss-loader'),
        options: {
          ident: 'postcss',
          plugins: () => [
          //省略代码
            px2rem({ remUnit: 75,exclude:/node_modules/i })  // 修改的代码
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },

最后， 重启项目

vue:

第一步
下载包

npm install lib-flexible
npm install px2rem-loader --dev

第二步
入口文件中引入 lib-flexible：

main.js

import Vue from 'vue'
import App from './App'
import 'lib-flexible/flexible.js';
Vue.config.productionTip = false
new Vue({
  el: '#app',
  components: { App },
  template: ''
})

第三步
将px2rem-loader 添加到cssLoaders

exports.cssLoaders = function (options) {
 /* 省略代码块 */
 
 const cssLoader = {
  /* 省略代码块 */
 }
 
 /* 添加的代码块 */
 const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
   remUnit: 37.5 // 基准大小 baseSize，设计稿宽度/10
  }
 }
 /* 添加的代码块 */
  
 function generateLoaders (loader, loaderOptions) {
  const loaders = [cssLoader, px2remLoader] // 添加px2remLoader
  if (loader) {
   /* 省略代码块 */
  }
 
  /* 省略代码块 */
}

重启项目；

不适配ipad / iPad Pro 的解决办法：
在入口页面加入以下代码：

   <script>
      /(iPhone|iPad|iPhone OS|Phone|iPod|iOS)/i.test(navigator.userAgent)&&(head=document.getElementsByTagName('head'),viewport=document.createElement('meta'),viewport.name='viewport',viewport.content='target-densitydpi=device-dpi, width=480px, user-scalable=no',head.length>0&&head[head.length-1].appendChild(viewport));
    </script>

参考：
React移动端适配解决方案
详解基于Vue/React项目的移动端适配方案