首页 > 其他分享 >uniapp rpx在超过960时样式错位的问题

uniapp rpx在超过960时样式错位的问题

时间:2022-12-02 21:11:52浏览次数:70  
标签:uniapp 960 rpx app 宽度 uni 屏幕

uni-app官网查一下,发现有下面这样一段话:

“这里需要对rpx的使用特别强调一下。
在移动设备上也有很多屏幕宽度,设计师一般只会按照750px屏幕宽度出图。此时使用rpx的好处在于,各种移动设备的屏幕宽度差异不是很大,相对于750px微调缩放后的效果,尽可能的还原了设计师的设计。
但是,一旦脱离移动设备,在pc屏幕,或者pad横屏状态下,因为屏幕宽度远大于750了。此时rpx根据屏幕宽度变化的结果就严重脱离了预期,大的惨不忍睹。”

并且提示在 pages.json 的 globeStyle 里配置 rpx 的如下参数:

{
   "globalStyle": {
     "rpxCalcMaxDeviceWidth": 960, // rpx 计算所支持的最大设备宽度,单位 px,默认值为 960
     "rpxCalcBaseDeviceWidth": 375, // rpx 计算使用的基准设备宽度,设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算,单位 px,默认值为 375
     "rpxCalcIncludeWidth": 750 // rpx 计算特殊处理的值,始终按实际的设备宽度计算,单位 rpx,默认值为 750
   },
 }

但是你会发现加了以后然并卵,后来把rpxCalcMaxDeviceWidth设为0后竟然可以了。

当然uni-app官网,后面也有说明:“通过上述配置中的前2个,即rpxCalcMaxDeviceWidth和rpxCalcBaseDeviceWidth,即可有效解决使用了rpx后,在宽屏下界面变的奇大无比的问题。如果你不需要特别定义这2个参数的数值,则无需在pages.json中配置它们,保持默认的960和375即可。”

具体还是要根据实际情况通过调整rpxCalcMaxDeviceWidth和rpxCalcBaseDeviceWidth的值来适配屏幕宽度。

参考:关于uni-app使用rpx在iPad上出现字体等样式不兼容问题 - (App Store/公众号/小程序:分享录) (xubingtao.cn) ; (4条消息) uni-app rpx适配大屏时失真_风花一世月的博客-CSDN博客 ;(4条消息) uniapp 解决 h5 PC端 屏幕过大失真 问题_HHH 917的博客-CSDN博客

标签:uniapp,960,rpx,app,宽度,uni,屏幕
From: https://www.cnblogs.com/ysx1129/p/16945613.html

相关文章

  • uniapp全局变量实现的四种方法
    一、公用模块定义一个专用的模块,用来组织和管理这些全局的变量,在需要的页面引入。注意:这种方式只支持多个vue页面或多个nvue页面之间公用,vue和nvue之间不公用。示例如下:......
  • uniApp安卓离线SDK运行
    一、下载uniapp提供的离线SDK包下载地址:https://nativesupport.dcloud.net.cn/AppDocs/download/android版本:2022年09月26日发布——HBuilderX(3.6.4.20220922)二、下载An......
  • uniapp实现点击打文件
    常用场景:登录时服务协议and隐私政策等uni.downloadFile({ url:'文件路径(建议使用服务器地址)', filePath:wx.env.USER_DATA_PATH+'/'+'自定义.pdf', //......
  • 用uniapp开发打包多端应用完整指南
    ​一、uni-app项目介绍用uni-app开发多端项目,一套代码可同时打包出各端小程序、h5和app,uni-app支持通过HBuilderX可视化界面和vue-cli命令行两种方式创建项目,下面示......
  • uniapp获取本机所有应用包名
    huoqu(e){ uni.showLoading({ title:'获取中' }); constmain=plus.android.runtimeMainActivity(); letpManager=plus.android.invoke(main,'ge......
  • uniapp 配置钉钉小程序package.json文件
    {"uni-app":{"scripts":{"mp-dingtalk":{"title":"钉钉小程序","env":{"UNI_PLATFOR......
  • uniapp
    uni-appvue语法uni-app的生命周期Vue的生命周期创建beforeCreatecreated可以使用this,没有dom作用:初始数据注册监听事件开启定时器ajax请求挂载beforeMount......
  • uniapp读取写入安卓文件
    uniapp读取安卓手机文件functhionreadJsonByFile(fileNamePath){ //只能用于安卓导入java类 constFile=plus.android.importClass('java.io.File') constBuffe......
  • 记录--uniapp微信小程序引入threeJs并导入模型
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言我的需求是使用uniapp写微信小程序,在小程序中使用threeJs就行了,目前暂不考虑兼容app什么的。1.引入......
  • 2022-11-28 记录uniapp+小程序项目 如何上传excel、word、图片文件
    这里直接用到微信提供的api:wx.chooseMessageFile示例: wx.chooseMessageFile({  count:1,  success:(res)=>{   consttempFilePaths=res.te......