uniapp开发H5页面样式问题

Question

大家又遇到过uniapp做h5页面，以rpx为单元自适应手机端，刚开始做的时候样式都没有问题，后面样式突然全局整体变小了，代码也没有改过，不知道是什么原因，求解答，谢谢各位了

Answer 1

该回答引用ChatGPT，如果有帮助到您请点个采纳
这种情况通常是由于 Uniapp 中的 rpx 单位是根据屏幕宽度动态计算的，如果屏幕宽度变小，则 rpx 单位对应的实际长度也会相应变小。

为了解决这个问题，您可以在 Uniapp 项目的 main.js 文件中指定一个固定的屏幕宽度，并在其他地方使用相对于该宽度的 rpx 单位，以保证样式的一致性。

例如：

// main.js
import Vue from 'vue';
import App from './App';

Vue.config.productionTip = false;

uni.getSystemInfo({
  success: function(res) {
    let screenWidth = res.screenWidth;
    let rate = 750 / screenWidth;
    Vue.prototype.screenWidth = screenWidth;
    Vue.prototype.rate = rate;
  }
});

App.mpType = 'app';

const app = new Vue({
  ...App
});
app.$mount();

然后，在样式文件中使用该比率计算 rpx 单位：

// 样式文件
.example {
  width: calc(100vw * {{rate}} / 750);
  height: calc(100vw * {{rate}} / 750 * 1.5);
  font-size: calc(100vw * {{rate}} / 750 * 0.5);
}

这样，不管屏幕宽度如何变化，您的样式都将保持一致。