基於Vue/React項目的移動端適配方案

時間 2019-11-06

標籤基於 vue react 項目移動適配方案欄目 React 简体版

原文原文鏈接

前言

本文的目標是經過下文介紹的適配方案，使用vue或react開發移動端及H5的時候，不須要再關心移動設備的大小，只須要按照固定設計稿的px值佈局，提高開發效率。
下文給出了本人分別使用create-react-app搭建的react（create-react-app）項目和使用vue-cli 2.x 搭建的vue項目中的 親測可用 配置方案。

px2rem或postcss-px2rem

在移動端中，爲了設配不一樣的設備，一般使用rem來作適配。
rem是經過根元素進行適配的，網頁中的根元素指的是<html>，咱們經過設置<html>的字體大小就能夠控制 rem 的大小（1rem = 1根元素字體大小）。
可見，只要咱們根據不一樣屏幕（使用css媒體查詢或js）設定好根元素<html>的字體大小，其餘已經使用了rem單位的元素就會自適應顯示相應的尺寸。
設計稿通常是按照一種特定設備型號（如iphone6）爲基礎且以px單位來定義樣式，爲了讓設計稿可以通用在不一樣的設備型號中，則存在着從px到rem的繁瑣計算轉化過程，所以須要更加科學的方式來使用rem單位。
px2rem或postcss-px2rem的原理：將css中px編譯爲rem，配合js根據不一樣手機型號計算出dpr的值，修改<meta>的viewport值和置<html>的font-size。

項目中的使用

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 了。

適用狀況 & 不適用狀況

以上實現轉換適用於：css

（1）vue 組件中編寫的<style></style>下的css。html

（2）從 react 項目的 index.js 或者 vue 項目的 main.js 中經過import ‘../../static/css/reset.css’引入css。vue

（3）在 vue 組件的<script type=」text/ecmascript-6″>import ‘../../static/css/reset.css'</script>中引入css。react
另外的狀況不適用：webpack

（1）在 vue 組件的<style></style>中經過@import 「../../static/css/reset.css (可考慮上面（2）、（3）的形式引入)。web

（2）外部樣式：<link rel=」stylesheet」 href=」static/css/reset.css」>。vue-cli

（3）元素內部樣式：style="height: 417px; width: 550px;"。bash

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。