uniapp移动端rem适配,font-size设置在哪
时间: 2024-05-12 13:20:22 浏览: 11
在uniapp移动端中,可以在 `App.vue` 或 `main.js` 文件中设置 `rootFontSize`,然后在 `App.vue` 中通过 `style` 标签设置 `html` 的 `font-size`,从而实现适配。
例如,在 `main.js` 文件中设置 `rootFontSize`:
```javascript
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
const rootFontSize = 16
Vue.prototype.$rootFontSize = rootFontSize
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
```
然后,在 `App.vue` 文件中设置 `html` 的 `font-size`:
```html
<template>
<div class="container">
<!-- 页面内容 -->
</div>
</template>
<style>
html {
font-size: {{ $rootFontSize / 2 }}px;
}
</style>
```
这里将 `rootFontSize` 除以 2 是因为 uniapp 中的 css 单位是 `rpx`,而 `html` 的 `font-size` 使用的是 `px`,所以需要将 `rootFontSize` 转换为 `px`。同时,由于 `rpx` 是以屏幕宽度为基准的,所以这里将 `rootFontSize` 除以 2 可以将 `html` 的 `font-size` 设置为屏幕宽度的一半,从而实现适配。