Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

React cli map #3

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

React cli map #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1a6940a
style(vm): vm
Mar 7, 2018
9db3d24
fix(style): style
Mar 7, 2018
7ecd668
docs(doc): doc
Mar 7, 2018
2d3ee97
fix(doc style): doc style
Mar 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
162 changes: 162 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,174 @@
<!--This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).-->

## mfe
### 针对移动端 使用postcss vw 适配
hahaha...


### 适配方案
相信大家对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
```
<meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover">
```
2. 引入 viewport-units-buggyfill.hacks的ali cdn
```
<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>
```
3. 初始化执行ali cdn的init方法
```
<script>
window.onload = function () {
window.viewportUnitsBuggyfill.init({
hacks: window.viewportUnitsBuggyfillHacks
});

var winDPI = window.devicePixelRatio;
var uAgent = window.navigator.userAgent;
var screenHeight = window.screen.height;
var screenWidth = window.screen.width;
var winWidth = window.innerWidth;
var winHeight = window.innerHeight;
alert(
"Windows DPI:" + winDPI +
";\ruAgent:" + uAgent +
";\rScreen Width:" + screenWidth +
";\rScreen Height:" + screenHeight +
";\rWindow Width:" + winWidth +
";\rWindow Height:" + winHeight
)
}
</script>
```
另外，还可以通过媒体查询对iphoneX可能出现的兼容问题进行hack，
代码如下：
```
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
/* iPhone X 独有样式写在这里*/

}
```
好了，完工

```
git clone [email protected]:myuanyuan/react-cli.git
cd react-cli
git checkout -b mfe
npm install
```

### `npm start`
你可以看到你的已经完美转为vw了，现在，在不同尺寸的设备上试一下吧

Runs the app in the development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
Expand All @@ -17,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.<br>
It correctly bundles React in production mode and optimizes the build for the best performance.
Expand Down
27 changes: 15 additions & 12 deletions config/webpack.config.dev.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
// }),
// ],
},
},
],
Expand Down
33 changes: 18 additions & 15 deletions config/webpack.config.prod.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:[
Expand Down Expand Up @@ -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',
// }),
// ],
},
},
],
Expand Down Expand Up @@ -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({
Expand Down
20 changes: 19 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand Down
37 changes: 37 additions & 0 deletions postcss.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
})

]
}
27 changes: 26 additions & 1 deletion public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@
<meta charset="utf-8">
<!--<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"> -->
<meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover">

<meta name="screen-orientation" content="portrait"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
Expand All @@ -28,6 +30,7 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<script type="text/javascript" src="/api.js"></script>
<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>
<title>React App</title>
</head>
<body>
Expand All @@ -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`.
-->
<script>
window.onload = function () {
window.viewportUnitsBuggyfill.init({
hacks: window.viewportUnitsBuggyfillHacks
});

var winDPI = window.devicePixelRatio;
var uAgent = window.navigator.userAgent;
var screenHeight = window.screen.height;
var screenWidth = window.screen.width;
var winWidth = window.innerWidth;
var winHeight = window.innerHeight;
alert(
"Windows DPI:" + winDPI +
";\ruAgent:" + uAgent +
";\rScreen Width:" + screenWidth +
";\rScreen Height:" + screenHeight +
";\rWindow Width:" + winWidth +
";\rWindow Height:" + winHeight
)
}
</script>
</body>
</html>
Loading