uniapp移动端rem适配

在uniapp中实现移动端rem适配，需要遵循以下步骤：

1. 在uniapp的main.js中引入flexible.js，这是一个用于计算rem值的库。在引入之前需要安装该库：

npm install lib-flexible --save

2. 在main.js中引入flexible.js，并执行初始化操作：

import 'lib-flexible/flexible.js'

3. 在CSS中使用rem单位，而不是px。例如：

div {
  width: 6rem;
  height: 3rem;
  font-size: 1.5rem;
}

4. 在需要设置字体大小的地方，可以使用以下代码设置：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 * 16 + 'px';

其中，375是设计稿的宽度，16是基准字体大小。

5. 如果需要设置特殊的字体大小，可以使用以下代码：

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

这段代码表示在宽度大于等于375px的屏幕上，div元素的字体大小为18px。

通过以上步骤，就可以实现uniapp移动端的rem适配。

相关问题

uniapp移动端rem适配，font-size设置在哪

在uniapp移动端中，可以在 `App.vue` 或 `main.js` 文件中设置 `rootFontSize`，然后在 `App.vue` 中通过 `style` 标签设置 `html` 的 `font-size`，从而实现适配。

例如，在 `main.js` 文件中设置 `rootFontSize`：

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`：

<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` 设置为屏幕宽度的一半，从而实现适配。

uniapp移动端图片适配

在UniApp中，可以使用CSS样式来对移动端图片进行适配。以下是一些常用的方法：

1. 使用百分比或vw/vh单位：可以通过设置图片的宽度和高度为百分比或vw/vh单位，使其相对于父元素或视口进行缩放。例如：

.img {
  width: 100%;
  height: auto;
}

2. 使用rem单位：UniApp支持使用rem单位来进行适配。可以根据设计稿的尺寸，将根元素的字体大小设置为设计稿宽度除以10，然后使用rem单位来设置图片的尺寸。例如：

html {
  font-size: 设计稿宽度 / 10;
}

.img {
  width: 10rem;
  height: auto;
}

3. 使用flex布局：使用flex布局可以方便地进行图片的自适应布局。可以将图片容器设置为flex布局，并使用`flex-grow`属性来控制图片的伸缩比例。例如：

.container {
  display: flex;
}

.img {
  flex-grow: 1;
  height: auto;
}

以上是一些常用的方法，具体选择哪种方法取决于你的需求和项目的具体情况。希望对你有帮助！