基于 react 的移动端适配方案

就不喜欢废话，直接上干货！！

一、创建项目

create-react-app react-vw-layout
cd react-vw-layout
npm start

npm start 会打开 http://localhost:3000/ ，react欢迎页面，项目创建成功

二、打开配置选项

由于react默认隐藏webpack配置，需要手动显示（ npm run eject 暴露配置项）

npm run eject 
//Are you sure you want to eject? This action is permanent. (y/N) 
y

运行完eject之后项目结构如图：

三、配置插件

安装 postCss 插件

npm i --save postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-preset-env postcss-viewport-units cssnano

安装的 postCss 插件有postcss-aspect-ratio-mini、postcss-px-to-viewport、postcss-write-svg、postcss-preset-env、postcss-viewport-units以及cssnano

也可以像下面这样装完一个再装另一个

npm i --save postcss-aspect-ratio-mini

npm i --save postcss-px-to-viewport

npm i --save postcss-write-svg

npm i --save postcss-preset-env

npm i --save postcss-viewport-units

npm i --save cssnano

安装成功之后，在config/webpack.config.js文件中进行如下修改

1、引入postCss插件

// 移动端适配添加 - 插入
const postcssAspectRatioMini = require('postcss-aspect-ratio-mini');
const postcssPxToViewport = require('postcss-px-to-viewport');
const postcssWriteSvg = require('postcss-write-svg');
const postcssCssnext = require('postcss-preset-env');//这个插件已经更新 postcss-preset-env 所以请使用 "postcss-preset-env"
const postcssViewportUnits = require('postcss-viewport-units');
const cssnano = require('cssnano');

2、加入postCss配置

加入配置代码位置：

{
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebook/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
            //加入位置
            //加入位置
            //加入位置
            postcssNormalize(),
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },

需要加入的代码：

// -----插入适配移动端配置项----->
			postcssAspectRatioMini({}),
            postcssPxToViewport({
              viewportWidth: 750, // (Number) The width of the viewport. 
              viewportHeight: 1334, // (Number) The height of the viewport. 
              unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to. 
              viewportUnit: 'vw', // (String) Expected units. 
              selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px. 
              minPixelValue: 1, // (Number) Set the minimum pixel value to replace. 
              mediaQuery: false // (Boolean) Allow px to be converted in media queries. 
            }),
            postcssWriteSvg({
              utf8: false
            }),
            postcssCssnext({}),
            postcssViewportUnits({}),
            cssnano({
             /* 旧的 --坑点
              preset: "advanced",
              autoprefixer: false,
              "postcss-zindex": false */
              
              //新配置继续使用高级配置,按照这个配置
              "cssnano-preset-advanced": {
                zindex: false,
                autoprefixer: false
          
              },
            }),

四、测试验证

修改App.js

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        hello vw-layout
      </div>
    );
  }
}
export default App;

修改App.css

.App {
  width: 750px;
  height: 200px;
  background: #7af2ec;
  color: #e20ea3;
  line-height: 200px;
  text-align: center;
}

npm start 启动项目，打开控制台，这个时候已经生效了

配置好生产环境之后验证,npm run build,这个时候，生产打包已经生效了。

五、加入viewport-units-buggyfill配置

首先在中引入阿里cdn

<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>

在body中，加入如下js代码：

<script>
  window.onload = function () {
    window.viewportUnitsBuggyfill.init({
      hacks: window.viewportUnitsBuggyfillHacks
    });
    // 验证输出
        const winDPI = window.devicePixelRatio
        const uAgent = window.navigator.userAgent
        const screenHeight = window.screen.height
        const screenWidth = window.screen.width
        const winWidth = window.innerWidth
        const winHeight = window.innerHeight

        console.log(winDPI, "设备 DPI")
        console.log(uAgent, "客户端")
        console.log(screenWidth, "屏幕宽度")
        console.log(winHeight, "屏幕高度")
        console.log(winWidth, "Windows Width")
        console.log(winHeight, "Windows Height")
  }
</script>

如果遇到 img 无法显示，则添加全局 css

img { 
    content: normal !important; 
}