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中引入 <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中引入 

<script>
window.onload = function () {
    window.viewportUnitsBuggyfill.init({
        hacks: window.viewportUnitsBuggyfillHacks
    });
}
</script>

 

4.安裝antd-mobile，再配置package.json。。（移動端很多公司都有自己的樣式風格，有自己定制化方面的組件，這塊看是否需要）

cnpm i antd-mobile -S

package.jspn下找到babel