基于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