uniapp适配解决方法

uni-app的专属强大自适应单位upx,rpx,不能动态赋值解决办法…

uni-app 使用 upx 作为默认尺寸单位, upx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。

开发者可以通过设计稿基准宽度计算页面元素 upx 值,设计稿 1px 与框架样式 1upx 转换公式如下:
设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx

举例说明:
若设计稿宽度为 640px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 *100 / 640,结果为:117upx。
若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,那么元素 B 在uni-app 里面的宽度应该设为:750 * 200 / 375,结果为:400upx。

如下图设计稿宽度为1920

在这里插入图片描述
------根据·公式设计稿宽度 / 750 = 比率 则1920/750=2.56 计算出1920宽度设计稿所占标准750百分比------

为了方便在Hbuilder X中 点击工具>设置>语言服务配置中拉到最下面有个px转rpx/upx,把上面计算的比率放进去

在这里插入图片描述
实际效果:

在这里插入图片描述
这样就根据自己输入的px尺寸自动转换为对应的upx尺寸了

选择upx就可以了

相关推荐

  1. uniapp如何ipad

    2024-07-11 16:40:04       32 阅读
  2. 关于成品项目分辨率解决方案

    2024-07-11 16:40:04       58 阅读
  3. uniapp如何实现跨端

    2024-07-11 16:40:04       58 阅读
  4. 移动端方案

    2024-07-11 16:40:04       32 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-11 16:40:04       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-11 16:40:04       72 阅读
  3. 在Django里面运行非项目文件

    2024-07-11 16:40:04       58 阅读
  4. Python语言-面向对象

    2024-07-11 16:40:04       69 阅读

热门阅读

  1. Jupyter Notebook简介

    2024-07-11 16:40:04       21 阅读
  2. 面向对象编程基本特征--封装 继承 多态

    2024-07-11 16:40:04       22 阅读
  3. 单机版k8s搭建

    2024-07-11 16:40:04       24 阅读
  4. k8s资源管理中request和limit的区别

    2024-07-11 16:40:04       24 阅读
  5. 软设之UML中的关系

    2024-07-11 16:40:04       20 阅读
  6. 编程语言在医疗健康领域的创新应用

    2024-07-11 16:40:04       21 阅读
  7. lvs三种模式

    2024-07-11 16:40:04       24 阅读
  8. 电商商城网站防护选购指南,高防CDN使用攻略

    2024-07-11 16:40:04       26 阅读
  9. [题解]P1113 杂务||拓扑排序板子题,但是dp求解

    2024-07-11 16:40:04       22 阅读
  10. PgMP考试报名攻略,不会的看这里!

    2024-07-11 16:40:04       24 阅读
  11. 高效利用iCloud指南

    2024-07-11 16:40:04       21 阅读
  12. 力扣面试经典150题

    2024-07-11 16:40:04       25 阅读