diff --git a/README.md b/README.md
index 45e1dbb..8fe51c7 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,173 @@
+## mfe
+### 针对移动端 使用postcss vw 适配
+hahaha...
+导航从pc直接移来的，好丑，请忽略。。。
+
+### 适配方案
+相信大家对rem和flex布局都很熟悉了，这里就不详细介绍了,只聊vw
+
+配置变动：
+```
+{
+ loader: require.resolve('postcss-loader'),
+ options: {
+ config: {
+ path: 'postcss.config.js' // 这个得在项目根目录创建此文件
+ },
+ // Necessary for external CSS imports to work
+ // https://github.com/facebookincubator/create-react-app/issues/2677
+ ident: 'postcss'
+ // plugins: () => [
+ // require('postcss-flexbugs-fixes'),
+ // autoprefixer({
+ // browsers: [
+ // '>1%',
+ // 'last 4 versions',
+ // 'Firefox ESR',
+ // 'not ie < 9', // React doesn't support IE8 anyway
+ // ],
+ // flexbox: 'no-2009',
+ // }),
+ // ],
+ },
+},
+```
+根目录新建 postcss.config.js
+```
+module.exports = {
+ "plugins": [
+ require('postcss-flexbugs-fixes'),
+ require("autoprefixer")({
+ browsers: [
+ '>1%',
+ 'last 4 versions',
+ 'Firefox ESR',
+ 'not ie < 9', // React doesn't support IE8 anyway
+ ],
+ flexbox: 'no-2009',
+ }),
+ require("postcss-aspect-ratio-mini"),
+ require("postcss-write-svg")({ utf8: false }),
+ require("postcss-cssnext"),
+ require("postcss-px-to-viewport")({
+ viewportWidth: 750,
+ viewportHeight: 1334,
+ unitPrecision: 3,
+ viewportUnit: 'vw',
+ selectorBlackList: ['.ignore', '.hairlines'],
+ minPixelValue: 1,
+ mediaQuery: false
+ }),
+ require("postcss-viewport-units"),
+ require("cssnano")({
+ preset: "advanced",
+ autoprefixer: false,
+ "postcss-zindex": false
+ })
+
+ ]
+}
+```
+上面的配置中，postcss-px-to-viewport可以然我们像原来一样去写px
+
+viewportWidth和viewportHeight的配置根据你们家ui给出的设计稿来定就好了。
+
+postcss-write-svg插件主要通过使用border-image和background来做1px的相关处理。比如
+我们先写一个1像素边框
+```
+@svg 1px-border {
+ height: 2px;
+ @rect {
+ fill: var(--color, black);
+ width: 100%;
+ height: 50%;
+ }
+ }
+```
+在需要的时候就可以这样使用
+```
+.example {
+ border: 1px solid transparent;
+ border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
+ }
+```
+当然还有background-image的实现方式，具体参考[postcss-write-svg](https://github.com/jonathantneal/postcss-write-svghttps://github.com/jonathantneal/postcss-write-svg)
+
+安装插件
+
+```
+npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano cssnano-preset-advanced --D
+```
+package.json文件中：
+```
+"dependencies": {
+ "cssnano": "^3.10.0",
+ "postcss-aspect-ratio-mini": "0.0.2",
+ "postcss-cssnext": "^3.1.0",
+ "postcss-px-to-viewport": "0.0.3",
+ "postcss-viewport-units": "^0.1.3",
+ "postcss-write-svg": "^3.0.1",
+ },
+
+```
+
+注意:autoprefixery一次就够了 在cssnano和postcss-cssnext把默认配置改为false，否则会影响性能
+
+接下来，修改 public/index.html
+主要有三个地方
+1. 修改 meta viewport为了适配iponeX 添加viewport-fit=cover
+```
+
+```
+2. 引入 viewport-units-buggyfill.hacks的ali cdn
+```
+
+```
+3. 初始化执行ali cdn的init方法
+```
+
+```
+另外，还可以通过媒体查询对iphoneX可能出现的兼容问题进行hack，
+代码如下：
+```
+@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
+ /* iPhone X 独有样式写在这里*/
+
+}
+```
+好了，完工
```
git clone git@github.com:myuanyuan/react-cli.git
cd react-cli
+git checkout -b mfe
npm install
```
-
### `npm start`
+你可以看到你的已经完美转为vw了，现在，在不同尺寸的设备上试一下吧
Runs the app in the development mode.
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
@@ -17,6 +177,7 @@ You will also see any lint errors in the console.
### `npm run build`
+在打包好之后，运行一遍
Builds the app for production to the `build` folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
index f1cf05a..1017ec8 100644
--- a/config/webpack.config.dev.js
+++ b/config/webpack.config.dev.js
@@ -194,21 +194,24 @@ module.exports = {
{
loader: require.resolve('postcss-loader'),
options: {
+ config: {
+ path: 'postcss.config.js' // 这个得在项目根目录创建此文件
+ },
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
- plugins: () => [
- require('postcss-flexbugs-fixes'),
- autoprefixer({
- browsers: [
- '>1%',
- 'last 4 versions',
- 'Firefox ESR',
- 'not ie < 9', // React doesn't support IE8 anyway
- ],
- flexbox: 'no-2009',
- }),
- ],
+ // plugins: () => [
+ // require('postcss-flexbugs-fixes'),
+ // autoprefixer({
+ // browsers: [
+ // '>1%',
+ // 'last 4 versions',
+ // 'Firefox ESR',
+ // 'not ie < 9', // React doesn't support IE8 anyway
+ // ],
+ // flexbox: 'no-2009',
+ // }),
+ // ],
},
},
],
diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
index 1966787..08cd597 100644
--- a/config/webpack.config.prod.js
+++ b/config/webpack.config.prod.js
@@ -62,7 +62,7 @@ module.exports = {
bail: true,
// We generate sourcemaps in production. This is slow but gives good results.
// You can exclude the *.map files from the build during deployment.
- devtool: shouldUseSourceMap ? 'source-map' : false,
+ // devtool: shouldUseSourceMap ? 'source-map' : false,
// In production, we only want to load the polyfills and the app code.
entry: {
app:[
@@ -220,27 +220,30 @@ module.exports = {
options: {
importLoaders: 1,
minimize: true,
- sourceMap: shouldUseSourceMap,
+ // sourceMap: shouldUseSourceMap,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
+ config: {
+ path: 'postcss.config.js' // 这个得在项目根目录创建此文件
+ },
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
- plugins: () => [
- require('postcss-flexbugs-fixes'),
- autoprefixer({
- browsers: [
- '>1%',
- 'last 4 versions',
- 'Firefox ESR',
- 'not ie < 9', // React doesn't support IE8 anyway
- ],
- flexbox: 'no-2009',
- }),
- ],
+ // plugins: () => [
+ // require('postcss-flexbugs-fixes'),
+ // autoprefixer({
+ // browsers: [
+ // '>1%',
+ // 'last 4 versions',
+ // 'Firefox ESR',
+ // 'not ie < 9', // React doesn't support IE8 anyway
+ // ],
+ // flexbox: 'no-2009',
+ // }),
+ // ],
},
},
],
@@ -319,7 +322,7 @@ module.exports = {
// https://github.com/facebookincubator/create-react-app/issues/2488
ascii_only: true,
},
- sourceMap: shouldUseSourceMap,
+ // sourceMap: shouldUseSourceMap,
}),
// Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
new ExtractTextPlugin({
diff --git a/package.json b/package.json
index 1af16c4..95fc7a3 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"fs-extra": "3.0.1",
- "fsevents": "1.1.2",
+ "fsevents": "^1.1.3",
"history": "^4.7.2",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
@@ -104,8 +104,26 @@
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"babel-runtime": "^6.20.0",
+ "better-scroll": "^1.8.4",
+ "css-unit-converter": "^1.1.1",
+ "cssnano": "^3.10.0",
+ "cssnano-preset-advanced": "^4.0.0-rc.2",
+ "isnumeric": "^0.3.2",
+ "onecolor": "^3.0.5",
+ "postcss": "^6.0.19",
+ "postcss-aspect-ratio-mini": "^0.0.2",
+ "postcss-cli": "^5.0.0",
+ "postcss-cssnext": "^3.1.0",
+ "postcss-flexbugs-fixes": "^3.2.0",
+ "postcss-media-query-parser": "^0.2.3",
+ "postcss-px-to-viewport": "^0.0.3",
+ "postcss-selector-matches": "^3.0.1",
+ "postcss-viewport-units": "^0.1.3",
+ "postcss-write-svg": "^3.0.1",
"react-app-rewire-less": "^2.1.0",
- "react-app-rewired": "^1.4.1"
+ "react-app-rewired": "^1.4.1",
+ "rgb": "^0.1.0",
+ "rgb-hex": "^2.1.0"
},
"jest": {
"collectCoverageFrom": [
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..805b8a5
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,37 @@
+module.exports = {
+ "plugins": [
+ require('postcss-flexbugs-fixes'),
+ require("autoprefixer")({
+ browsers: [
+ '>1%',
+ 'last 4 versions',
+ 'Firefox ESR',
+ 'not ie < 9', // React doesn't support IE8 anyway
+ ],
+ flexbox: 'no-2009',
+ }),
+ require("postcss-aspect-ratio-mini"),
+ require("postcss-write-svg")({ utf8: false }),
+ require("postcss-cssnext")({
+ features: {
+ autoprefixer: false,
+ }
+ }),
+ require("postcss-px-to-viewport")({
+ viewportWidth: 750,
+ viewportHeight: 1334,
+ unitPrecision: 3,
+ viewportUnit: 'vw',
+ selectorBlackList: ['.ignore', '.hairlines'],
+ minPixelValue: 1,
+ mediaQuery: false
+ }),
+ require("postcss-viewport-units"),
+ require("cssnano")({
+ preset: "advanced",
+ autoprefixer: false,
+ "postcss-zindex": false
+ })
+
+ ]
+}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 37c7604..e850136 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,9 @@
-
+
+
+
@@ -28,6 +30,7 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
+
React App
@@ -45,5 +48,27 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
+