vue如何使用rem适配

使用rem适配是多种移动端页面适配方案中比较常用的一种。下面我将详细讲解在Vue中如何使用rem适配的完整攻略。

步骤一：配置viewport

在html文件头部添加如下代码：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">

其中，viewport就是指浏览器视窗（屏幕）的大小，width、height为视口宽度、高度，initial-scale、minimum-scale、maximum-scale为缩放设置。

步骤二：安装amfe-flexible

amfe-flexible是一个静态的flexible适配方案的Vue插件。它主要用于在JS中设置html的font-size。使用命令npm i -S amfe-flexible 安装。

我们将在入口文件main.js中引入它。

import 'amfe-flexible'

步骤三：设置设计稿宽度

在移动端开发中，我们通常会基于某个固定的设计稿进行页面开发。因此，需要设置设计稿的宽度。我们假设设计稿的宽度为750px，在main.js中添加如下代码：

document.documentElement.style.fontSize = `${document.documentElement.clientWidth / 7.5}px`

其中，7.5是设定的一个值，表示将屏幕分为750份，每份为100px，即：fontSize = 屏幕宽度 / 7.5。

步骤四：使用rem

设置完设计稿宽度后，我们就可以在其他组件中使用rem来进行页面布局了。我们假设现在需要设置一个宽度为200px的元素，代码示例如下：

<div class="box"></div>

.box {
  width: 2.66666667rem;
}

这样的设置就能够使页面在不同宽度的手机上显示的效果基本一致。

示例一：Vant组件库的rem适配

Vant是一款基于Vue的移动端组件库，它的rem适配也非常简单，只需要在第二步中安装amfe-flexible之后，将vant组件库的样式文件中的px改成rem即可。代码示例如下：

import 'amfe-flexible'
import 'vant/lib/index.css'

const themeColor = '#39f';

const style = document.createElement('style');
style.textContent = `
  body {
    color: ${themeColor};
  }
  /* 将vant组件中的px转成rem */
  .van-button {
    height: 1.0rem !important;
    line-height: 1.0rem !important;
    font-size: 0.4rem !important;
  }
  /* 省略其他vant组件样式的设置 */
`
document.head.appendChild(style);

示例二：手动使用lib-flexible

除了使用amfe-flexible之外，我们也可以手动设置lib-flexible。具体的步骤如下：

1. 安装lib-flexible：npm i -S lib-flexible
2. 在入口文件main.js中引入flexible：import 'lib-flexible'
3. 在页面中设置基准font-size：document.documentElement.style.fontSize =${document.documentElement.clientWidth / 7.5}px;

其中，第三步的7.5是可调整的，根据自己的实际情况来设定，一般来说7.5比较适合。

上述两个示例中，都是基于750设计稿来进行rem适配的，如果是其他设计稿，需要根据实际情况进行调整。

总的来说，使用rem适配是非常方便的，只需要对设计稿的尺寸进行合理设置即可。