React umi使用postcss将px转为vw来自适应
2020-05-22 本文已影响0人
Lia代码猪崽
一、通过umi来搭建app（如果已新建项目请跳过此步骤）
- 创建目录，初始化umi
mkdir react-pxtovw && cd react-pxtovw
yarn create umi
创建的时候选择app就足够了，然后也使用typescript
- 安装依赖
yarn
二、使用vw来实现自适应
- 在
html文件的<head></head>标签内插入以下代码：
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no,width=device-width">
PS: 如果没有找到html文件，需要新建 src/pages/document.ejs
2.安装依赖
cnpm install -D postcss-import postcss-url cssnano-preset-advanced
cnpm install -S postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext cssnano postcss-viewport-units
3.引入和配置
打开且修改.umirc.ts`文件：
// 引入步骤2安装的依赖们
import postcssImport from 'postcss-import';
import postcssUrl from 'postcss-url';
import postcssAspectRatioMini from 'postcss-aspect-ratio-mini';
import postcssWriteSvg from 'postcss-write-svg';
import postcsscssnext from 'postcss-cssnext';
import pxToViewPort from 'postcss-px-to-viewport';
import cssnano from 'cssnano';
const config: IConfig = {
// 这里省略了很多...
// 额外的postcss插件用这个extraPostCSSPlugins：
extraPostCSSPlugins: [
postcssImport({}),
postcssUrl({}),
postcssAspectRatioMini({}),
postcssWriteSvg({ utf8: false }),
postcsscssnext({}),
pxToViewPort({
viewportWidth: 720, // (Number) The width of the viewport.
viewportHeight: 1280, // (Number) The height of the viewport.
unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: 'vw', // (String) Expected units.
selectorBlackList: ['.ignore', '.hairlines'], // (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.
}),
cssnano({
preset: "advanced",
autoprefixer: false,
"postcss-zindex": false,
zindex: false
})
],
}
PS：用到的 extrapostcssplugins 。—— 定义额外的 PostCSS 插件，格式为数组。
三、show me the code
写个div，目录地址为：react-pxtovw/src/pages/index.tsx：
<div className={styles.test}>测试</div>
再编写下css样式，目录地址为：react-pxtovw/src/pages/index.css：
.test {
display: inline-block;
width: 500px;
height: 500px;
line-height: 500px;
text-align: center;
color: #fff;
background: pink;
}
页面展示
写的是px，编译后自动转为vw
