移动端适配经常使用的就是 rem; 主要有以下几种方案：
1：rem + 媒体查询（@media）
2：js + rem（查询屏幕宽度）
3： VW + rem（不需要查询屏幕宽度）
这几种方式最终css写的单位是 rem;

rem适配原理

rem是一个相对单位。
是相对于根元素html的font-size宽度值。大多数浏览器默认字体宽度是16px(如果没有设置过)，也就是 1rem = 16px;

如下图所示：

既然rem相对于根据html的font-size来的，那再不同的屏幕宽度时改变html的字体宽度值，那么rem的值也会相应的改变；这也就是为什么要频繁的改变html下面font-size值的原因；

方案1：rem+媒体查询

---

计算公式：当前屏幕宽度下的html字体值 = 当前屏幕宽度*预设字体值/psd设计稿的宽度(750px)

预设字体值可以随意设，计算方便我通常设置为100;

媒体查询适配模板

以下font-size的字体值是根据预设字体值 100;

common.css

/* 媒体查询适配模板 预设值为 100 	*/
@media screen and (min-width: 320px) {
  html {
    font-size: 42.667px;
  }
}

@media screen and (min-width: 375px) {
  html {
    font-size: 50px;
  }
}

@media screen and (min-width: 414px) {
  html {
    font-size: 55.2px;
  }
}

@media screen and (min-width: 540px) {
  html {
    font-size: 72px;
  }
}

@media screen and (min-width: 750px) {
  html {
    font-size: 100px;
  }
}

在main.js引入

main.js

import Vue from 'vue'
import App from './App.vue'
// 引入适配css
import '@/assets/common.scss'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

使用：如果量得设计图其中一个元素的宽度是235px,那么在css代码中需要写成 :先除以预设值 再加上rem即可；如下：

.div{
	width:2.35rem; // 235/100=2.35+rem
}

方案2：js+rem

---

这种方案也是阿里早期开源的一个[移动端适配]解决方案（flexible.js）；

原理是需要查询屏幕的宽度，只不过这种需要通过监听屏幕的尺寸变化 ，实时调用clientWidth方法获取屏幕宽度来更改html的字体值；

分析如下：

350：当前屏幕宽度（设备宽度） curScreenWidth
750：psd设计稿宽度  psdWidth
100：预设字体基础值  1rem = 100px  preFontSize
  x： 当前屏幕宽度字体的基础值（html的font-size的值）curFontSize

320      x 
———  =  ———
640     100

x = (320*100)/640  公式如下：

curFontSize=(curScreenWidth*100)/psdWidth

牢记公式： 当前屏幕宽度下的html字体值 = 当前屏幕宽度*预设字体值/psd设计稿的宽度(750px);

1，开始封装

autoSize.js

// 封装 rem + js 移动端适配方案
export function autoSize() {
  //设计稿的宽度
  var psdWidth = 750;

  //预设字体值
  var preFontSize = 100;

  //当前屏幕宽度
  var curScreenWidth = document.documentElement.clientWidth;
  //当前屏幕对应的html字体值
  var curFontSize = (curScreenWidth * preFontSize) / psdWidth;

  //设备宽度在750px 
  if (curScreenWidth > 750) {
    curScreenWidth = 750;
  }
  //把计算下来的当前屏幕html字体值 赋值给html元素 documentElement属性会获取到html根元素 然后为之设置字体值
  document.documentElement.style.fontSize = curFontSize + "px";
}

2，vue 中使用 （resize方法监听窗口变化，实时计算html下面的font-size值）

App.vue

<template>
  <div id="app">
  </div>
</template>

<script>
import { autoSize } from "@/assets/auto";
export default {
  name: "App",
 // 监听resize事件
  mounted() {
    window.addEventListener("resize", () => {
      autoSize();
    });
  }
};
</script>

这种方法实际写入到css代码中还是：测量宽度/100 + rem；

方案3：vw+rem（不用查询屏幕宽度）

---

使用视口单位布局 (纯css) 实现动态改变font-size属性值，不需要引用js文件，但需要在meta标签添加viewport 属性；vue项目会自动添加；

Viewport 介绍：

vw：是css3规范中宽度视口单位，将视口宽度平均分成100份；

vh：将视口高度平均分成100份；

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

属性说明：
width：控制 viewport 的大小，可以指定的一个值，如 device-width为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）
height：和 width 相对应，指定高度
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例
maximum-scale：允许用户缩放到的最大比例  float_value
minimum-scale：允许用户缩放到的最小比例  float_value
user-scalable：用户是否可以手动缩放 no表示不可以  yes为可以

视口布局原理：确定基准值以常见的750像素宽度的设计稿为例，根据vw单位可知：

750px = 100vw ； 1px = 0.133333vw;

100px = 13.33333vw = 1rem;

px和rem关系还是100倍 ; 那么实际写入如到css代码中还是：测量宽度 / 100 + rem;

html {
    font-size:13.33333vw; //100px=1rem = 13.33333vw
}

• 优点：页面元素随着页面宽度变化
• 缺点：
  • 兼容性没有rem好 ,得大量计算， 不是很精确
  • 转换后的长度单位不够直观修改维护困难