最近在react 上配置使用vw 適配方案，總體表現(xiàn)優(yōu)秀寓盗。所以很多同學們都在觀望vw 適配到底行不行灌砖，靠不靠譜。
在這里傀蚌，從我在項目中實戰(zhàn)應用下來但經(jīng)驗來說基显，可行，靠譜善炫！
簡單配置撩幽，一勞永逸，高可靠的還原設計師的稿子箩艺，給你底氣和設計師對標UI窜醉。
歡迎挑戰(zhàn)還原度，從此做一個自信的前端工程師艺谆。哈哈～
一定要看到底榨惰，可能有你會遇到坑的解藥！拿走不謝++++ 給個小星星吧
https://github.com/caoxiaoke/react-vw-layout
該demo 為vw 適配方案 react 16 && react-router-dom 4+ 搭配使用静汤，一個多頁面路由項目.
步驟：
1读串、創(chuàng)建項目 && 初始化
create-react-app react-vw-layout
cd react-vw-layout
2、開啟我們的配置之路&&簡單配置
react 把配置都隱藏了撒妈，需要我們手動來顯示配置
npm run eject
//Are you sure you want to eject? This action is permanent. (y/N) y
之后可以看到 config文件 && scripts 文件夾
image
3恢暖、安裝我們需要配置用到的插件(建議使用cnpm)
npm install --save postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano
4、開始配置
在config/webpack.config.js 中修改代碼
先引入postcss cssnano插件
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');
增加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,
}),
//在這個位置加入我們需要配置的代碼
//在這個位置加入我們需要配置的代碼
//在這個位置加入我們需要配置的代碼
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', '.list-row-bottom-line', '.list-row-top-line'], // (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
}),
postcssPresetEnv({}),
// postcssViewportUnits({
// filterRule: rule => rule.selector.indexOf('::after') === -1 && rule.selector.indexOf('::before') === -1 && rule.selector.indexOf(':after') === -1 && rule.selector.indexOf(':before') === -1
// }),
postcssViewportUnits({}),
cssnano({
"cssnano-preset-advanced": {
zindex: false,
autoprefixer: false
},
})
//在這個位置加入我們需要配置的代碼
//在這個位置加入我們需要配置的代碼
//在這個位置加入我們需要配置的代碼
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
}
5狰右、配置完成以后杰捂，我們可以看到vw 神奇的效果了
npm run start
瀏覽器會打開 http://localhost:8080/
.App {
background-color: bisque;
display: flex;
color: white;
justify-content: center;
align-items: center;
font-size: 30px;
height: 200px;
width: 750px;
}
image
6、我們加入兼容我們android 低版本的機型hack 加入viewport-units-buggyfill配置
同學們棋蚌，經(jīng)過實戰(zhàn)配置viewport-units-buggyfill之后嫁佳，4.2 4.3 4.4+ 系統(tǒng)版本上表現(xiàn)都 ok,項目中主要使用flexbox 布局
demo 版本中直接引入阿里的cdn 文件，在自己項目中可以放自己公司的服務器或者項目中谷暮。
打開public/index.html蒿往，在head 中插入 viewport-units-buggyfill 和body 中使用
<head>
<script src="http://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>
<script>
window.onload = function () {
window.viewportUnitsBuggyfill.init({
hacks: window.viewportUnitsBuggyfillHacks
});
}
</script>
<body>
最后完整的index.html
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,shrink-to-fit=no"/> <meta name="theme-color" content="#000000" /> <!-- manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ --> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <!-- 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-vw-layout</title> <!--<script type="text/javascript" src="/zx_local_res/jssdk/zx.js"></script>--> <script src="http://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>
項目中有遇到的坑：
1、cssnano 如果你的版本為：4+ 以上湿弦，請在配置中如下方案配置：
cssnano({
"cssnano-preset-advanced": {
zindex: false,
autoprefixer: false
},
})
我遇到了始終把你定位的z-index值重新計算為：1瓤漏，巨坑，不然你會一口老血噴出來的。
和cssnano 3+版本配置不一樣蔬充。
2蝶俱、ios 系統(tǒng)下img不顯示問題，解決方案如下：
/*兼容ios不顯示圖片問題*/
img {
content: normal !important
}
3饥漫、1px 問題榨呆，解決方案
/*1px 解決方案*/
@svg square {
@rect {
fill: var(--color, white);
width: 100%;
height: 50%;
}
}
.example-line {
width: 100%;
background: white svg(square param(--color #E6E6E6));
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom left;
}
/*1px 解決方案*/
/*偽元素1px*/
.row-cell:before {
content: " ";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid #e5e5e5;
color: #e5e5e5;
transform-origin: 0 0;
transform: scaleY(0.5);
z-index: 2;
}
如果你不使用react 也不使用vue ，在項目中只使用html頁面 vw實現(xiàn)移動端適配庸队，請點這 《如何在html項目中使用vw實現(xiàn)移動端適配》
image
image
