From 1a6940a4689364438429d938b0d6a025a2460862 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=97=E5=9B=AD=E5=9B=AD?= Date: Wed, 7 Mar 2018 15:25:32 +0800 Subject: [PATCH 1/4] style(vm): vm vm vm --- README.md | 3 ++- config/webpack.config.dev.js | 27 +++++++++++++++------------ config/webpack.config.prod.js | 2 +- package.json | 7 +++++++ postcss.config.js | 33 +++++++++++++++++++++++++++++++++ public/index.html | 27 ++++++++++++++++++++++++++- src/style/main.css | 4 ++++ src/style/main.scss | 4 ++++ 8 files changed, 92 insertions(+), 15 deletions(-) create mode 100644 postcss.config.js diff --git a/README.md b/README.md index 45e1dbb..ea446ba 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@ - +mfe +### 针对移动端 使用postcss vw 适配 ``` git clone git@github.com:myuanyuan/react-cli.git cd react-cli 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..36cecec 100644 --- a/config/webpack.config.prod.js +++ b/config/webpack.config.prod.js @@ -319,7 +319,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..2f27756 100644 --- a/package.json +++ b/package.json @@ -104,6 +104,13 @@ "babel-preset-stage-2": "^6.24.1", "babel-register": "^6.26.0", "babel-runtime": "^6.20.0", + "better-scroll": "^1.8.4", + "postcss-aspect-ratio-mini": "^0.0.2", + "postcss-cssnext": "^3.1.0", + "postcss-flexbugs-fixes": "^3.2.0", + "postcss-px-to-viewport": "^0.0.3", + "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" }, diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..efe2e39 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,33 @@ +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 + }) + + ] +} \ No newline at end of file diff --git a/public/index.html b/public/index.html index 37c7604..a6bba0c 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`. --> + diff --git a/src/style/main.css b/src/style/main.css index 71c1bc3..aa857e2 100644 --- a/src/style/main.css +++ b/src/style/main.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; @import url(~slick-carousel/slick/slick.css); @import url(~slick-carousel/slick/slick-theme.css); html { @@ -77,3 +78,6 @@ html { margin: 0; padding: 0; font-family: sans-serif; } + +@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { + /* iPhone X 独有样式写在这里*/ } diff --git a/src/style/main.scss b/src/style/main.scss index 68502a6..3517d4a 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -11,3 +11,7 @@ html{ font-family: sans-serif; } } +@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { + /* iPhone X 独有样式写在这里*/ + +} From 9db3d2474c16cc5c53c615b0044b553595c9e2b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=97=E5=9B=AD=E5=9B=AD?= Date: Wed, 7 Mar 2018 16:45:39 +0800 Subject: [PATCH 2/4] fix(style): style style style --- config/webpack.config.prod.js | 31 +++++++++++++++++-------------- package.json | 13 ++++++++++++- postcss.config.js | 6 +++++- 3 files changed, 34 insertions(+), 16 deletions(-) diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js index 36cecec..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', + // }), + // ], }, }, ], diff --git a/package.json b/package.json index 2f27756..ec475e7 100644 --- a/package.json +++ b/package.json @@ -105,14 +105,25 @@ "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 index efe2e39..805b8a5 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -12,7 +12,11 @@ module.exports = { }), require("postcss-aspect-ratio-mini"), require("postcss-write-svg")({ utf8: false }), - require("postcss-cssnext"), + require("postcss-cssnext")({ + features: { + autoprefixer: false, + } + }), require("postcss-px-to-viewport")({ viewportWidth: 750, viewportHeight: 1334, From 7ecd668fe9ae866d67d1240f675ecc2efc6c873d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=97=E5=9B=AD=E5=9B=AD?= Date: Wed, 7 Mar 2018 17:25:41 +0800 Subject: [PATCH 3/4] docs(doc): doc doc doc --- README.md | 168 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 166 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ea446ba..f7279b7 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,171 @@ -mfe +## mfe ### 针对移动端 使用postcss vw 适配 +hahaha... + + +### 适配方案 +相信大家对rem和flex布局都很熟悉了，这里就不详细介绍了 +配置变动： +``` +{ + 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像素边框的scss函数 +``` +@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 -D +npm i postcss-px-to-viewport -D +npm i postcss-write-svg -D +npm i postcss-cssnext -D +npm i postcss-viewport-units -D +npm i cssnano -D +npm i cssnano-preset-advanced -D +``` +或者 +``` +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 @@ -9,7 +173,7 @@ 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. From 2d3ee97ff31d93611eff03ef4173d604b8f85971 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=97=E5=9B=AD=E5=9B=AD?= Date: Wed, 7 Mar 2018 17:33:12 +0800 Subject: [PATCH 4/4] fix(doc style): doc style doc style doc style --- README.md | 31 ++++++++++++++----------------- 1 file changed, 14 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index f7279b7..004ca62 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,8 @@ hahaha... ### 适配方案 -相信大家对rem和flex布局都很熟悉了，这里就不详细介绍了 +相信大家对rem和flex布局都很熟悉了，这里就不详细介绍了,只聊vw + 配置变动： ``` { @@ -69,9 +70,12 @@ module.exports = { ] } ``` -上面的配置中，postcss-px-to-viewport可以然我们像原来一样去写px，viewportWidth和viewportHeight的配置根据你们家ui给出的设计稿来定就好了。 +上面的配置中，postcss-px-to-viewport可以然我们像原来一样去写px + +viewportWidth和viewportHeight的配置根据你们家ui给出的设计稿来定就好了。 + postcss-write-svg插件主要通过使用border-image和background来做1px的相关处理。比如 -我们先写一个1像素边框的scss函数 +我们先写一个1像素边框 ``` @svg 1px-border { height: 2px; @@ -89,20 +93,10 @@ postcss-write-svg插件主要通过使用border-image和background来做1px的 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 +当然还有background-image的实现方式，具体参考[postcss-write-svg](https://github.com/jonathantneal/postcss-write-svghttps://github.com/jonathantneal/postcss-write-svg) 安装插件 -``` -npm i postcss-aspect-ratio-mini -D -npm i postcss-px-to-viewport -D -npm i postcss-write-svg -D -npm i postcss-cssnext -D -npm i postcss-viewport-units -D -npm i cssnano -D -npm i cssnano-preset-advanced -D -``` -或者 ``` npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano cssnano-preset-advanced --D ``` @@ -119,7 +113,7 @@ package.json文件中： ``` -注意autoprefixery一次就够了 在cssnano和postcss-cssnext把默认配置改为false，否则会影响性能 +注意:autoprefixery一次就够了 在cssnano和postcss-cssnext把默认配置改为false，否则会影响性能 接下来，修改 public/index.html 主要有三个地方 @@ -156,8 +150,8 @@ package.json文件中： } ``` -另外，还可以通过媒体查询对iphoneX可能出现的兼容问题进行hack -如下： +另外，还可以通过媒体查询对iphoneX可能出现的兼容问题进行hack， +代码如下： ``` @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { /* iPhone X 独有样式写在这里*/ @@ -169,11 +163,13 @@ package.json文件中： ``` 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. @@ -182,6 +178,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.