將在學(xué)習(xí)uni-app過程中遇到的問題記錄一下：

1.rem根元素字號適配

• 問題
  uni-app中可以使用rem。
  rem根據(jù)屏幕大小進(jìn)行適配，我們在普通的Vue項目中，會通過window對象獲取設(shè)備參數(shù)（使用uni-app編寫h5頁面時仍可以使用該方法），但是在微信小程序中沒有window對象，需要通過uni框架提供的接口來獲取相關(guān)信息。并且無法全局設(shè)置根元素大?。ㄎ覜]有查到相關(guān)設(shè)置方法），但可以對某個頁面設(shè)置（<page-mate>）。

• 解決
  我采用的方法是在main.js中設(shè)置rem根元素字體大小，然后掛載到原型上成為全局可引用的變量。之后在每個頁面對根元素大小進(jìn)行設(shè)置。

//main.js

let fontSize = '100px';
const res = uni.getSystemInfoSync();
if(res.screenWidth < 750){//根據(jù)屏幕寬度進(jìn)行適配
      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>需要放在頁面的第一個標(biāo)簽。

問題匯總：

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