react 控件怎么适应手机_react中使用vw + antd-mobile进行移动端布局

首先create-react-app react-vw一顿简单操作生成个demo

1.cnpm run eject 暴露config文件，再cnpm run start报错，

解决：cnpm i @babel/plugin-transform-react-jsx -S

cnpm  i @babel/plugin-transform-react-jsx-self -S

说是 @babel/plugin-transform-react-jsx依赖没装，装好后，又提示@babel/plugin-transform-react-jsx-self没装。。依次装上到能运行react初始化后，接着第二步！

2.安装相关postcss相关插件

cnpm i postcss-aspect-ratio-mini postcss-px-to-viewport-opt postcss-write-svg postcss-preset-env postcss-viewport-units cssnano -S

3.配置config下的webpack.config.js

// 引入postCss插件

const postcssAspectRatioMini = require('postcss-aspect-ratio-mini');

const postcssPxToViewport = require('postcss-px-to-viewport-opt');

const postcssWriteSvg = require('postcss-write-svg');

const postcssPresetEnv = require('postcss-preset-env');

const postcssViewportUnits = require('postcss-viewport-units');

const cssnano = require('cssnano');

// 引入postCss配置

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', '.antd'], // (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.

exclude: /(\/|\\)(node_modules)(\/|\\)/

}),

postcssWriteSvg({

utf8: false

}),

postcssPresetEnv({}),

postcssViewportUnits({}),

cssnano({

"cssnano-preset-advanced": {

zindex: false,

autoprefixer: false

},

})，

测试下vw的设置是否生效，修改App.css  => .App{ text-algin: center; font-size: 20px }   然后cnpm run start，打开控制台

已经生效

在样式要加上对img标签的设置，在项目开发时候有遇到过img的src属性被覆盖没显示图片的坑，就是content的锅。(如果在标签上设置一些伪类如：after，：before有的效果可能会被覆盖)

img {

content: normal !important; /*vw布局 img属性会默认加上content，导致显示不出图片的bug*/

}

附上一个react-vw-stylus-less模板 ：https://github.com/wenhai03/react-vw-stylus-less-

这个模板可以根据项目情况选择对应的样式编写

以下内容可以忽略不看~~~

分割线------------------------------------------------------------

特别需要注意的是：如果你安装的前面那一堆插件中有个postcss-cssnext，这个插件安装后，重启会报以下好几个错误，解决方案，得一步步来！坑多。。。

所以为了不挖坑，postcss-cssnext替换为 postcss-preset-env ， postcss-px-to-viewport替换为postcss-px-to-viewport-opt

(非常有可能遇到的问题 1: throw new BrowserslistError('Unknown browser query ' + selection + '') BrowserslistError: Unknown browser query dead)

解决：package.json文件找到  browserslist 修改

"browserslist": [

"last 2 versions",

"android 4",

"opera 12"

],

(问题2： ./src/index.css

Module build failed: Error: Cannot load preset "advanced". Please check your configuration for errors and try again.)

解决： cssnano版本过高，需要降级

"cssnano": "^4.1.10", -> "cssnano": "^3.10.0",(cssnano修改完指定版本，node_modules删除，重新安装下依赖包)

加入viewport-units-buggfill配置(这个步骤看网上方案是解决，安卓低版本手机)

打开public/index.html

heade中引入 

body中引入

window.viewportUnitsBuggyfill.init({

hacks: window.viewportUnitsBuggyfillHacks

});

}

4.安装antd-mobile，再配置package.json。。(移动端很多公司都有自己的样式风格，有自己定制化方面的组件，这块看是否需要)

cnpm i antd-mobile -S

package.jspn下找到babel