基于react/vue的移动端终极适配方案（更新css-modules配置）
先上github地址 https://github.com/gaohan1994/react-vw-layout 有空点个赞蛤~~css
2018-4-19日更新适配到安卓低版本的插件buggyfill（是我疏忽致使你们觉得vw解决方案兼容范围太小，原第六步css-modules改成buggyfill，css-modules顺延为第七步）
2018-4-16日更新css-modules配置，前面步骤不变，可直接跳到第七步。
写在前面的话
在接触到大漠先生牵头开发的vw解决方案以前，我使用的是阿里的第一代适配解决方案 lib-flexible 在使用vw解决方案开发一套H5以后，我真正的被vw的威力所折服。 因为大漠先生只给出了vue-cli的配置方式，并未给出react系列对应脚手架create-react-app配置版本，在看过大漠先生的配置以后，我在create-react-app脚手架生成的项目上进行了一套配置，使得使用react的各位师兄弟也可使用vw解决方案！ 话很少说开工html
vue使用方式：《如何在Vue项目中使用vw实现移动端适配》 关于具体如何使用请参考 再聊移动端页面的适配 使用Flexible实现手淘H5页面的终端适配vue
移动端适配最接近完美的解决方案在react中的使用方式。本文只讲create-react-app建立的项目如何配置，具体每一个插件的用途和使用方法请先查阅大漠先生的文章，我相信大漠先生的文章已经讲的很明白。
《如何在Vue项目中使用vw实现移动端适配》webpack
重要的事情说三遍。必定要先大概看一下大漠先生的文章再往下看，不然可能会一头雾水。
1.建立项目
create-react-app react-vw-layout
cd react-vw-layout
npm start
复制代码
打开http://localhost:3000/ 能够看到react欢迎页面，第一步成功。git
2.打开配置选项
因为react默认隐藏webpack配置须要手动显示。github
npm run eject
//Are you sure you want to eject? This action is permanent. (y/N)
y
复制代码
运行完eject以后项目结构以下 web
第二步收工，第三部开始配置各类插件。vue-cli
3.增长配置
安装postCss插件
npm i --save postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano
复制代码
在config/webpack.config.dev.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-cssnext');
const postcssViewportUnits = require('postcss-viewport-units');
const cssnano = require('cssnano');
复制代码
2.加入postCss配置
加入配置代码位置以下
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
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-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', }), //加入地点 //加入地点 //加入地点 ], }, }, ], }, 复制代码
须要加入的代码以下
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
})
复制代码
第三步收工。
4.测试
修改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: #f27a7a;
color: #ffffff;
line-height: 200px;
text-align: center;
}
复制代码
从新npm start页面显示以下
能够说是很是OK，剩下最后一个问题，配置生产环境webpack配置文件。
5.配置生产环境webpack.config.js
操做与配置测试环境文件相同先引入插件，在相同的位置配置postCss插件 配置完成后执行npm run build 打开static/css/main.********.css
6.加入viewport-units-buggyfill配置
这一步不过在大漠先生的文章中或是我本身的项目中都已经配置，系我本身的疏忽忘记写在文章中致使你们觉得vw兼容范围小。抱歉！！！
打开public/index.html
首先在<head></head>中引入阿里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
});
}
</script>
复制代码
最终index.html以下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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">
<!--
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>
<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>
</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
});
}
</script>
</body>
</html>
复制代码
从新执行npm start打开页面发现：
若是遇到img没法显示，则添加全局css
img {
content: normal !important;
}
复制代码
OK配置成功。这样就适配了低版本安卓机型
7.加入css-modules配置
通常的小项目不使用css-modules已经能够hold住了，可是页面多起来仍是建议使用css-modules，下面介绍一下用法：
执行npm i --save react-css-modules
在App.js文件中引入插件 import CSSModules from 'react-css-modules';
修改css文件的引入方式 从import './App.css';修改成import styles from './App.css';
修改引用Css方式 className=>styleName
修改导出方式 export default App=>export default CSSModules(App, styles);
保存，重新执行npm start查看页面发现失败
缘由是未打开css import配置，此时import styles from './App.css';该语句并未成功引入css文件。
打开webpack.config.dev.js加入modules: true 找到以下位置
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
//看这里看这里看这里看这里
modules: true,
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
//.....省略
}
}
],
},
复制代码
保存，再次执行npm start查看页面
class名太过乱码不适于调试，再次打开
webpack.config.dev.js 找到以下位置加入语句
localIdentName:'[name]_[local]_[hash:base64:5]'
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
modules: true,
importLoaders: 1,
//看这里看这里看这里
localIdentName: '[name]_[local]_[hash:base64:5]'
},
},
{
loader: require.resolve('postcss-loader'),
options: {
//.....省略
}
}
],
},
复制代码
再次执行npm start查看页面
OJBK大功告成！
最后相同步骤加入到webpack.config.prod.js中 执行npm run build 查看打包文件
彳亍吧，OK了。
END.其余想说的话
git地址再发一次，但愿有空能帮忙点个赞~谢谢~~！！ https://github.com/gaohan1994/react-vw-layout 没有配置成功的能够参考一下。尤为是css-modules可能改的地方比较多。
当初看到大漠先生的vw适配方案真的是眼前一亮，在尝试了以后以为这套方案的生产力很是强悍，其实按照本文进行配置已经能够知足至关一部分项目，
除了一点就是没有使用同时我是个Typescript重度患者！我极度做死的成功配置了css-modules，固然我本身已经成功配置了css-modules要修改的地方比较多，之后会出一篇文章来再继续分享，create-react-app typescript version的vw + css-modules版本，如今回想起来配置的那几天真的生不如死。。。各类 踩坑。 等若是有人须要ts + react + vw 解决方案的时候我再写一篇文章吧。 那就到这里了，但愿你们使用vw解决方案玩的愉快！
- 1. 基于react/vue的移动端终极适配方案（更新css-modules配置）
- 2. 关于移动端终极适配解决方案
- 3. 移动端H5终端适配方案
- 4. 移动端适配方案
- 5. 移动端前端适配方案
- 6. 移动端的适配方案
- 7. 移动端适配的方案----flexible
- 8. 基于Vue/React项目的移动端适配方案
- 9. 基于REM的移动端响应式适配方案
- 10. 前端适配：移动端/web端适配方案
- 更多相关文章...
- • Spring基于Annotation装配Bean - Spring教程
- • Spring基于XML装配Bean - Spring教程
- • ☆基于Java Instrument的Agent实现
- • IntelliJ IDEA 代码格式化配置和快捷键
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 基于react/vue的移动端终极适配方案（更新css-modules配置）
- 2. 关于移动端终极适配解决方案
- 3. 移动端H5终端适配方案
- 4. 移动端适配方案
- 5. 移动端前端适配方案
- 6. 移动端的适配方案
- 7. 移动端适配的方案----flexible
- 8. 基于Vue/React项目的移动端适配方案
- 9. 基于REM的移动端响应式适配方案
- 10. 前端适配：移动端/web端适配方案