基於react/vue的移動端終極適配方案（更新css-modules配置）
先上github地址 https://github.com/gaohan1994... 有空點個贊蛤~~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解決方案！
話很少說開工vue使用方式：《如何在Vue項目中使用vw實現移動端適配》
關於具體如何使用請參考
再聊移動端頁面的適配
使用Flexible實現手淘H5頁面的終端適配html
移動端適配最接近完美的解決方案在react中的使用方式。本文只講create-react-app建立的項目如何配置，具體每一個插件的用途和使用方法請先查閱大漠先生的文章，我相信大漠先生的文章已經講的很明白。
重要的事情說三遍。必定要先大概看一下大漠先生的文章再往下看，不然可能會一頭霧水。
1.建立項目
create-react-app react-vw-layout cd react-vw-layout npm start
打開http://localhost:3000/ 能夠看到react歡迎頁面，第一步成功。webpack
2.打開配置選項
因爲react默認隱藏webpack配置須要手動顯示。git
npm run eject //Are you sure you want to eject? This action is permanent. (y/N) y
運行完eject以後項目結構以下
github
第二步收工，第三部開始配置各類插件。web
3.增長配置
安裝postCss插件vue-cli
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... 沒有配置成功的能夠參考一下。尤爲是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端適配方案