qq_42149250 2023-02-03 19:04 采纳率: 92.6%
浏览 54
已结题

uniapp开发H5页面样式问题

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

  • 写回答

1条回答 默认 最新

  • Eliot5566 2023-02-03 19:11
    关注

    该回答引用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);
    }
    
    
    

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 2月12日
  • 已采纳回答 2月4日
  • 创建了问题 2月3日

悬赏问题

  • ¥200 如何使用postGis实现最短领规划?
  • ¥15 pyinstaller打包错误
  • ¥20 cesm的气溶胶排放文件
  • ¥15 逐月累计,月份不连续,补齐月份
  • ¥15 应用简单的Python代码完成一个学生成绩管理系统
  • ¥15 用matlab求微分方程初值问题
  • ¥15 vscode下编写第三方库opencv与pcl代码时没有代码提示
  • ¥15 能够跑通不报错,如何解决?(标签-matlab)
  • ¥15 MOS在RDS较大,频率高时开关波形异常
  • ¥15 SCENIC分析报错求解答