在 create-react-app 生成的项目中使用 vw 实现移动端适配

2018-07-03sad creeper

最近在开发一个移动端网页时遇到了经典的布局问题,即美工做的移动端UI图是1080*1920像素的UI图,如果直接按照UI图做出来的页面无法在手机上正常的展示,如何能够实现按照UI图1:1开发的网页能够在不同的机型上都能够比较好的显示呢?

经过查阅文章,有两种方式可以实现:

  1. 使用 rem+viewpoint 的方式:这种方式淘宝工程师做了个轮子,参考文章:使用Flexible实现手淘H5页面的终端适配
  2. 使用 vw 的方式:这种方式使用了CSS3新增的单位 vw 和 vh 实现,参考文章:再聊移动端页面的适配 ----以及--- 如何在Vue项目中使用vw实现移动端适配

我使用了第二种方案:

使用这种方案只需要将 px 转换为对应的 vw 即可,同时,如果再安装一个 css 后编译插件,在 css 编译的时候自动实现替换就更完美了,代码中可以完全按照UI中1:1来写,然后让工具实现自动转换,这个转换插件也是有淘宝工程师提供:postcss-px-to-viewport

有两种配置方式:1. 使用npm run eject 2. 使用 react-app-rewired

配置方式1:

首先需要将 create-react-app 中的 webpack 配置弹出来

npm run eject

然后安装 postcss-px-to-viewport

npm i react-app-rewired --S

然后在 config/webpack.config.dev.js 和 config/webpack.config.prod.js 中添加配置

...
...
...
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
...
...
...
require('postcss-px-to-viewport')({
viewportWidth: 1080,
viewportHeight: 1920,
unitPrecision: 5,
viewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false
}),
],
},
},
...
...
...

其中的 viewportWidth,viewportHeight 就是参考的UI图的宽和高(我这里就是 1080 和 1920)

配置方式2:

安装 react-app-rewire-postcss

然后在根目录下的 config-overrides.js 中添加如下代码:

const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
// do stuff with the webpack config...
require('react-app-rewire-postcss')(config, {
plugins: loader => [
require('postcss-px-to-viewport')({
viewportWidth: 375, // (Number) The width of the viewport.
viewportHeight: 667, // (Number) The height of the viewport.
unitPrecision: 5, // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: 'vw', // (String) Expected units.
selectorBlackList: [], // (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.
})
]
});
return config;
};

配置完成后,运行项目,清缓存,审查元素查看生成的css,即可看到代码中的 px 已经被替换成对应的 vw

img.user-type {
height: 195px;
width: 195px;
}

参考文章:https://segmentfault.com/a/1190000016780204

阅读 835 评论