在uni-app框架中使用rem（h5和微信小程序）

将在学习uni-app过程中遇到的问题记录一下：

1.rem根元素字号适配

• 问题
  uni-app中可以使用rem。
  rem根据屏幕大小进行适配，我们在普通的Vue项目中，会通过window对象获取设备参数（使用uni-app编写h5页面时仍可以使用该方法），但是在微信小程序中没有window对象，需要通过uni框架提供的接口来获取相关信息。并且无法全局设置根元素大小（我没有查到相关设置方法），但可以对某个页面设置（<page-mate>）。

• 解决
  我采用的方法是在main.js中设置rem根元素字体大小，然后挂载到原型上成为全局可引用的变量。之后在每个页面对根元素大小进行设置。

//main.js

let fontSize = '100px';
const res = uni.getSystemInfoSync();
if(res.screenWidth < 750){//根据屏幕宽度进行适配
      fontSize = 100 * (res.screenWidth / 750) + 'px';
}
Vue.prototype.$footFontSize = fontSize;

//page.vue

<template>
  <page-mate :root-foot-size="footSize"></page-mate>
  <div>..</div>
</template>

<script>
    export default {
        data() {
            return {
                footSize: this.$rootFontSize,
            }
        }
    }
</script>

注意:<page-meta>需要放在页面的第一个标签。

问题汇总：

1.在uni-app框架中使用rem（h5和微信小程序）
2.index.html的设置