前言

本文的目標(biāo)是通過下文介紹的適配方案，使用vue或react開發(fā)移動端及H5的時候，不需要再關(guān)心移動設(shè)備的大小，只需要按照固定設(shè)計稿的px值布局，提升開發(fā)效率。

下文給出了本人分別使用create-react-app搭建的react（create-react-app）項目和使用vue-cli 2.x 搭建的vue項目中的 親測可用 配置方案。

px2rem或postcss-px2rem

項目中的使用

recat項目配置postcss-px2rem

首先，我們使用 react 的腳手架 create-react-app 初始化一個 webpack 項目（前提是已經(jīng)安裝過create-react-app，具體不再闡述）。

create-react-app my-app

暴露webpack配置，即 react-scripts 包：

yarn eject

使用yarn 安裝項目所需依賴后，安裝 lib-flexible 、 postcss-px2rem 和 postcss-loader：

yarn add postcss-px2rem lib-flexible yarn add postcss-loader --dev

在入口頁面 index.html 中設(shè)置<meta>標(biāo)簽：

<meta name="viewport" content="width=device-width,inital-scale=1.0,  maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

然后在項目入口文件 index.js 中引入 lib-flexible：

import 'lib-flexible';

接著，在項目config目錄下的 webpack.config.js 中引入 postcss-px2rem ：

const px2rem = require('postcss-px2rem')

同時，在 webpack.config.js 的 postcss-loader loader里面添加 ：

{    loader: require.resolve('postcss-loader'),    options: {     /* 省略代碼... */     plugins: () => [      require('postcss-flexbugs-fixes'),      require('postcss-preset-env')({       autoprefixer: {        flexbox: 'no-2009',       },       stage: 3,      }),      px2rem({remUnit: 37.5}), // 添加的內(nèi)容      /* 省略代碼... */     ],     sourceMap: isEnvProduction && shouldUseSourceMap,    },   },

最后，使用 yarn start 重啟項目，則會發(fā)現(xiàn)項目中的postcss-px2rem配置完成。