這篇文章給大家分享的是有關(guān)如何解決基于Vue/React項(xiàng)目移動(dòng)端適配的問(wèn)題的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

成安ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書(shū)銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書(shū)合作）期待與您的合作！

px2rem或postcss-px2rem

• 在移動(dòng)端中，為了設(shè)配不同的設(shè)備，通常使用rem來(lái)做適配。

• rem是通過(guò)根元素進(jìn)行適配的，網(wǎng)頁(yè)中的根元素指的是，我們通過(guò)設(shè)置的字體大小就可以控制 rem 的大?。?rem = 1根元素字體大?。?。

• 可見(jiàn)，只要我們根據(jù)不同屏幕（使用css媒體查詢或js）設(shè)定好根元素的字體大小，其他已經(jīng)使用了rem單位的元素就會(huì)自適應(yīng)顯示相應(yīng)的尺寸。

• 設(shè)計(jì)稿一般是按照一種特定設(shè)備型號(hào)（如iphone6）為基礎(chǔ)且以px單位來(lái)定義樣式，為了讓設(shè)計(jì)稿能夠通用在不同的設(shè)備型號(hào)中，則存在著從px到rem的繁瑣計(jì)算轉(zhuǎn)化過(guò)程，因此需要更加科學(xué)的方式來(lái)使用rem單位。

• px2rem或postcss-px2rem的原理：將css中px編譯為rem，配合js根據(jù)不同手機(jī)型號(hào)計(jì)算出dpr的值，修改的viewport值和置的font-size。

項(xiàng)目中的使用

recat項(xiàng)目配置postcss-px2rem

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

create-react-app my-app

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

yarn eject

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

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

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

然后在項(xiàng)目入口文件 index.js 中引入 lib-flexible：

import 'lib-flexible';

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

const px2rem = require('postcss-px2rem')

同時(shí)，在 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 重啟項(xiàng)目，則會(huì)發(fā)現(xiàn)項(xiàng)目中的postcss-px2rem配置完成。

vue項(xiàng)目配置px2rem

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

vue init webpack my-app

命令執(zhí)行之后，會(huì)在當(dāng)前目錄生成一個(gè)以“my-app”命名的項(xiàng)目文件夾。進(jìn)入項(xiàng)目目錄：

cd my-app

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

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

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

然后在項(xiàng)目入口文件 main.js 中引入 lib-flexible：

import 'lib-flexible/flexible.js';

同時(shí)，在項(xiàng)目build目錄下的 utils.js 中，將px2rem-loader 添加到cssLoaders中。通過(guò)搜索找到 generateLoaders 方法，在這里添加：

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

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

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

  /* 省略代碼塊 */
}

最后，使用 yarn dev 重啟項(xiàng)目，會(huì)發(fā)現(xiàn)自己設(shè)置的px被轉(zhuǎn)為rem 了。

適用情況 & 不適用情況

以上實(shí)現(xiàn)轉(zhuǎn)換適用于：
（1）vue 組件中編寫(xiě)的下的css。
（2）從 react 項(xiàng)目的 index.js 或者 vue 項(xiàng)目的 main.js 中通過(guò)import ‘../../static/css/reset.css'引入css。
（3）在 vue 組件的中引入css。

另外的情況不適用：
（1）在 vue 組件的中通過(guò)@import “../../static/css/reset.css (可考慮上面（2）、（3）的形式引入)。
（2）外部樣式：。
（3）元素內(nèi)部樣式：。

感謝各位的閱讀！關(guān)于“如何解決基于Vue/React項(xiàng)目移動(dòng)端適配的問(wèn)題”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！