就不喜欢废话,直接上干货!!
一、创建项目
create-react-app react-vw-layout
cd react-vw-layout
npm start
npm start 会打开 http://localhost:3000/ ,react欢迎页面,项目创建成功
二、打开配置选项
由于react默认隐藏webpack配置,需要手动显示( npm run eject 暴露配置项)
npm run eject
//Are you sure you want to eject? This action is permanent. (y/N)
y
运行完eject之后项目结构如图:
三、配置插件
安装 postCss 插件
npm i --save postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-preset-env postcss-viewport-units cssnano
安装的 postCss 插件有postcss-aspect-ratio-mini、postcss-px-to-viewport、postcss-write-svg、postcss-preset-env、postcss-viewport-units以及cssnano
也可以像下面这样装完一个再装另一个
npm i --save postcss-aspect-ratio-mini
npm i --save postcss-px-to-viewport
npm i --save postcss-write-svg
npm i --save postcss-preset-env
npm i --save postcss-viewport-units
npm i --save cssnano
安装成功之后,在config/webpack.config.js文件中进行如下修改
1、引入postCss插件
// 移动端适配添加 - 插入
const postcssAspectRatioMini = require('postcss-aspect-ratio-mini');
const postcssPxToViewport = require('postcss-px-to-viewport');
const postcssWriteSvg = require('postcss-write-svg');
const postcssCssnext = require('postcss-preset-env');//这个插件已经更新 postcss-preset-env 所以请使用 "postcss-preset-env"
const postcssViewportUnits = require('postcss-viewport-units');
const cssnano = require('cssnano');
2、加入postCss配置
加入配置代码位置:
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
//加入位置
//加入位置
//加入位置
postcssNormalize(),
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
需要加入的代码:
// -----插入适配移动端配置项----->
postcssAspectRatioMini({}),
postcssPxToViewport({
viewportWidth: 750, // (Number) The width of the viewport.
viewportHeight: 1334, // (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.
}),
postcssWriteSvg({
utf8: false
}),
postcssCssnext({}),
postcssViewportUnits({}),
cssnano({
/* 旧的 --坑点
preset: "advanced",
autoprefixer: false,
"postcss-zindex": false */
//新配置继续使用高级配置,按照这个配置
"cssnano-preset-advanced": {
zindex: false,
autoprefixer: false
},
}),
四、测试验证
修改App.js
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
hello vw-layout
</div>
);
}
}
export default App;
修改App.css
.App {
width: 750px;
height: 200px;
background: #7af2ec;
color: #e20ea3;
line-height: 200px;
text-align: center;
}
npm start 启动项目,打开控制台,这个时候已经生效了
配置好生产环境之后验证,npm run build,这个时候,生产打包已经生效了。
五、加入viewport-units-buggyfill配置
首先在中引入阿里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>
在body中,加入如下js代码:
<script>
window.onload = function () {
window.viewportUnitsBuggyfill.init({
hacks: window.viewportUnitsBuggyfillHacks
});
// 验证输出
const winDPI = window.devicePixelRatio
const uAgent = window.navigator.userAgent
const screenHeight = window.screen.height
const screenWidth = window.screen.width
const winWidth = window.innerWidth
const winHeight = window.innerHeight
console.log(winDPI, "设备 DPI")
console.log(uAgent, "客户端")
console.log(screenWidth, "屏幕宽度")
console.log(winHeight, "屏幕高度")
console.log(winWidth, "Windows Width")
console.log(winHeight, "Windows Height")
}
</script>
如果遇到 img 无法显示,则添加全局 css
img {
content: normal !important;
}