詳解基于Vue/React項目的移動端適配方案

前言

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

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

px2rem或postcss-px2rem

項目中的使用

recat項目配置postcss-px2rem

首先，我們使用 react 的腳手架 create-react-app 初始化一個 webpack 項目（前提是已經安裝過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 中設置<meta>標簽：

<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}), // 添加的內容
 /* 省略代碼... */
 ],
 sourceMap: isEnvProduction && shouldUseSourceMap,
 },
 },

最后，使用 yarn start 重啟項目，則會發現項目中的postcss-px2rem配置完成。

vue項目配置px2rem

首先，我們使用 vue 的腳手架 vue-cli 初始化一個 webpack 項目（前提是已經安裝過vue-cli，具體不再闡述），一些選項根據自己項目需要選擇。

vue init webpack my-app

命令執行之后，會在當前目錄生成一個以“my-app”命名的項目文件夾。進入項目目錄：

cd my-app

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

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

在入口頁面 index.html 中設置<meta>標簽：

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

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

import 'lib-flexible/flexible.js';

同時，在項目build目錄下的 utils.js 中，將px2rem-loader 添加到cssLoaders中。通過搜索找到 generateLoaders 方法，在這里添加：

exports.cssLoaders = function (options) {
 /* 省略代碼塊 */

 const cssLoader = {
 /* 省略代碼塊 */
 }

 /* 添加的代碼塊 */
 const px2remLoader = {
 loader: 'px2rem-loader',
 options: {
 remUnit: 37.5 // 基準大小 baseSize，設計稿寬度/10
 }
 }
 /* 添加的代碼塊 */
 
 // generate loader string to be used with extract text plugin
 function generateLoaders (loader, loaderOptions) {
 const loaders = [cssLoader, px2remLoader] // 添加px2remLoader
 if (loader) {
 /* 省略代碼塊 */
 }

 /* 省略代碼塊 */
}

最后，使用 yarn dev 重啟項目，會發現自己設置的px被轉為rem 了。

適用情況 & 不適用情況

以上實現轉換適用于：
（1）vue 組件中編寫的<style></style>下的css。
（2）從 react 項目的 index.js 或者 vue 項目的 main.js 中通過import ‘../../static/css/reset.css'引入css。
（3）在 vue 組件的<script type=”text/ecmascript-6″>import ‘../../static/css/reset.css'</script>中引入css。

另外的情況不適用：
（1）在 vue 組件的<style></style>中通過@import “../../static/css/reset.css (可考慮上面（2）、（3）的形式引入)。
（2）外部樣式：<link rel=”stylesheet” href=”static/css/reset.css”>。
（3）元素內部樣式：style="height: 417px; width: 550px;"。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com