react移动端适配方案实践

栏目: IOS · Android · 发布时间: 5年前

内容简介:本文项目基于create-react-app构建。更多移动端资料推荐tipspackage.json 中添加依赖,并安装

本文项目基于create-react-app构建。更多移动端资料推荐

tips

/* 处理 vm 适配图片不显示问题 */
img {
  content: normal !important; 
}
复制代码

:one: 项目初始 + 暴露配置项

  • 1、create-react-app react-vw-layout 初始化项目
  • 2、npm run eject 暴露配置项

:two: postCss插件安装配置

package.json 中添加依赖,并安装

"postcss-aspect-ratio-mini": "0.0.2",
//--坑点 已经更新 postcss-preset-env 所以请使用 "postcss-preset-env": "6.0.6":point_down:
"postcss-cssnext": "^3.1.0",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
"postcss-px-to-viewport": "0.0.3",
"postcss-viewport-units": "^0.1.4",
"postcss-write-svg": "^3.0.1"

复制代码

config/webpack.config.dev.js 文件中修改添加配置(开发环境生效) (生产环境打包配置如下,也是一样的在文件夹 config/webpack.config.prod 中修改)

// config/webpack.config.dev.js
// 文件头部引进依赖
const fs = require('fs');
const path = require('path');
const resolve = require('resolve');
const webpack = require('webpack');
const PnpWebpackPlugin = require('pnp-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const getClientEnvironment = require('./env');
const paths = require('./paths');
const ManifestPlugin = require('webpack-manifest-plugin');
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt');
const typescriptFormatter = require('react-dev-utils/typescriptFormatter');

// 移动端适配添加 - 插入
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": "6.0.6",
const postcssViewportUnits = require('postcss-viewport-units');
const cssnano = require('cssnano');


//配置项中添加使用

 {
    // 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,
        }),

        // -----插入适配移动端配置项-----:point_down:
        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
          },
        })
      ],
    },
},

复制代码

:three:测试验证

修改 App.css 文件

.App {
  width: 750px;
  height: 300px;
  background: #409eff;
  color: #ffffff;
  line-height: 200px;
  text-align: center;
}
复制代码

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

react移动端适配方案实践

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

react移动端适配方案实践

:four: 一些兼兼容性hacks处理

修改 public/index.html, 引入阿里的 cdn

<!-- index.html body 后添加-->
<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>
<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>
复制代码
react移动端适配方案实践

至此配置算是完成了,更多其中插件的配置,还需要了解一下官方的配置使用,此外插件和可行性方案都会更新,这里只是作为自己学习实际的一个可行性方案实践的过程,如果有更多更新方案可以留言告知。谢阅~


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

智能革命

智能革命

李彦宏 等 / 中信出版集团 / 2017-5-1 / 68.00元

人类历史上的历次技术革命,都带来了人类感知和认知能力的不断提升,从而使人类知道更多,做到更多,体验更多。以此为标准,李彦宏在本书中将人工智能定义为堪比任何一次技术革命的伟大变革,并且明确提出,在技术与人的关系上,智能革命不同于前几次技术革命,不是人去适应机器,而是机器主动来学习和适应人类,并同人类一起学习和创新这个世界。“人工智能”正式写入2017年政府工作报告,折射出未来人工智能产业在我国经济发......一起来看看 《智能革命》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具