2018 年是我感觉是前端的插件年, 在 CSS 方面, postcss 的插件也是刚刚的, 无论是 autoprefixer, 还是 postcss-cssnext 等一系列方面, 今天刚好做一个移动端新项目, 特意请教了手淘团队, 出了一个新方案, 开始抛弃
使用 Flexible 实现手淘 H5 页面的终端适配
, 使用 vw 布局方案, 关于 vue-cli 使用的配置已经有讲解, 我就讲讲 create-react-app 的配置
具体的内容原因请下以面链接
w3cplus vm 布局
配置方面就不用说了, 如何用 creat-react-app 生成一个项目, 运行起来, 请看以下链接
https://reactjs.org/docs/forms.html
直接进入如何配置
生成项目后, 直接进行 webpack.config.dev.js, 配置开发环境配置找到这段代码
{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',
// }),
// ],
},
},
create-react-app 自己配置了, 内联的 autoprefixer, 把它注示掉, 然后在 options 里加指向的配置地址, 把所有的 plugins 插件配置全放入一个在项目根目标的 postcss.config.js, 通过 postcss 解析的时候自然会运行这些差件, 因为运用大量的配置, 在生产环境同样要同到, 进行一个共同配置.
在配置之前先下一些包
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano cssnano-preset-advanced --D
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
})
]
}
以上的配置原理还是请到 w3cplus vm 布局
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',
}),
为了不破坏整体性还是把 create-react-app 原本的差件搬过来. 关于 postcss 的配置就结束了
改一下 public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="theme-color" content="#000000">
<!-- manifest.json provides metadata used when your web app is added to
the homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<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>
<!-- Notice the use of %PUBLIC_URL% in the tags above. It will be replaced
with the URL of the `public` folder during the build. Only files inside
the `public` folder can be referenced from the HTML. Unlike "/favicon.ico"
or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will work correctly both with
client-side routing and a non-root public URL. Learn how to configure a
non-root public URL by running `npm run build`. -->
<title>
React App
</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root">
</div>
<!-- This HTML file is a template. If you open it directly in the browser,
you will see an empty page. You can add webfonts, meta tags, or analytics
to this file. The build step will place the bundled scripts into the <body> tag.
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>
引入
viewport-units-buggyfill.hacks
的 ali cdn 再初始化执行 init 方法
ok 此时配置完成, 运行 npm start
注意几点: viewportWidth: 750 可以当作是 iphone6 的视口度, 你的设计图也要是 750 的比例, 也是移动端的标准设计比. 正常的用 px, 最后会 / 2 进行一个比例换算.
解决安桌机 0.5px 线的问题, 需要通过 postcss-write-svg, 对于我这种不懂 svg 的, 是一个很奇秒的设计, 示例请看原作者.
当你写好之后, 发现 chrome 控制台是换成了 vw, 就是成功了, 如果设置了最小转化值 minPixelValue: 1, 说明小于等于 1px 的不进行 vw 的转换.
在生产环境 webpack.production.config.js 中, 与 dev 也是同样的配置.
感谢手淘团队, 感 w3cPlus 大漠
来源: https://juejin.im/post/5a70742c6fb9a01cbc6eaffb