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

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

设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx

举例说明:

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

1、动态绑定的 style 不支持直接使用 upx

<!-- - 静态upx赋值生效 -->
<view class="test" style="width:200upx"></view>
<!-- - 动态绑定不生效 -->
<view class="test" :style="{width:winWidth + 'upx;'}"></view>

2、使用 uni.upx2px(Number) 转换为 px 后再赋值。

<template>
<view>
<view class="half-width" :style="{width: halfWidth}">
半屏宽度
</view>
</view>
</template> <script>
export default {
computed: {
halfWidth() {
return uni.upx2px(750 / 2) + 'px';
}
}
}
</script>
<style>
.half-width {
background-color: #FF3333;
}
</style>
 

uni-app的专属强大自适应单位upx,但是这个这是一个大坑,不能动态赋值解决办法的更多相关文章

  1. App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure.-解决办法

    运行环境:Xcode Version 7.3.1 (7D1014) 使用NSURL进行数据请求数据代码: -(NSData *)requestData{ NSURL *url = [NSURL URL ...

  2. 关于iphone6安装了727个应用后,更新app 导致一些app无法更新,无法删除,重启后消失,但是却还是占用空间的解决办法

    我的iphone6 苹果手机,64GB的,存储空间最近一直很吃紧,很捉急,昨天,终于下定决心 解决下这个问题. 由于 空间大,我又随便安装许多APP,现在有727个app,常用的其实就是那个几十个而已 ...

  3. mac安装软件运行提示「xxx.app已损坏,打不开.你应该将它移到废纸篓」的解决办法

    「xxx.app已损坏,打不开.你应该将它移到废纸篓」,其实并非你安装的软件已损坏,而是Mac系统的安全设置问题,往往这些软件可能是经过了汉化或者破解,所以被Mac认为「已损坏」,那么解决方法就是临时 ...

  4. appium1.4+华为8.0执行自动化脚本,报启动session失败,原因是unicode_ime_apk\Uni codeIME-debug.apk在手机上已存在,再次安装失败,导致启动session失败,解决办法:换高版本的appium

    最开始做Android自动化测试时,通过执行脚本发现报,已安装UnicodeIME-debug.apk,再次安装失败,当时觉得这个apk对我来说没用,就把D:\Program Files (x86)\ ...

  5. CSS中的自适应单位vw、vh、vmin、vmax

    1.vw.vh.vmin.vmax各单位的意义 上面的自适应单位可以统称为视口单位. 可以先了解一下视口指的是什么? 在PC端,视口指的是在PC端,指的是浏览器的可视区域:而在移动端,它涉及3个视口: ...

  6. uni app中使用自定义图标库

    项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...

  7. 小账本APP——软件项目风险管理及解决办法案例

    小账本APP——软件项目风险管理及解决办法案例 摘要 软件项目风险是指在软件开发过程中遇到的预算和进度等方面的问题以及这些问题对软件项目的影响.软件项目风险会影响项目计划的实现,如果项目风险变成现实, ...

  8. 安卓,支付宝app登录时,提示 服务器安全证书已过期或不可信任,请问怎么解决

    安卓,支付宝app登录时,提示 服务器安全证书已过期或不可信任,请问怎么解决 请把手机时间调成当前时间.

  9. Unity多单位战斗寻路问题的一种解决办法

    Unity多单位战斗寻路问题的一种解决办法 Unity提供了NavMesh 导航组件   NavMesh是在实践中通用性最好的一种导航方式,但是Unity的实现并没有完全提供一个开放自由的API. 主 ...

随机推荐

  1. 洛谷 P2486 BZOJ 2243 [SDOI2011]染色

    题目描述 给定一棵有n个节点的无根树和m个操作,操作有2类: 1.将节点a到节点b路径上所有点都染成颜色c: 2.询问节点a到节点b路径上的颜色段数量(连续相同颜色被认为是同一段),如“112221” ...

  2. hdu_1021_Fibonacci Again_201310232237

    Fibonacci Again Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  3. war包结构

    一个war包里面必含的两个目录是meta-inf和web-inf文件夹 一个war包里面必含的两个目录是meta-inf和web-inf文件夹 一个war包里面必含的两个目录是meta-inf和web ...

  4. 【线段树I:母题】hdu 1166 敌兵布阵

    [线段树I:母题]hdu 1166 敌兵布阵 题目链接:hdu 1166 敌兵布阵 题目大意 C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又開始忙乎了.A国在海 ...

  5. 深入分析JavaWeb Item38 -- 监听器(Listener)高速学习

    一.监听器介绍 1.1.监听器的概念 监听器是一个专门用于对其它对象身上发生的事件或状态改变进行监听和对应处理的对象,当被监视的对象发生情况时,马上採取对应的行动.监听器事实上就是一个实现特定接口的普 ...

  6. 大学,助你成长or 让你堕落?

    不管是论坛.贴吧.还是博客,都或多或少能够看到诸如对大学教育的反思.抨击之类的文章.至于什么是大学,大学又该怎样度过.大学是助你成长还是让你堕落了?我想这应该是一个见仁见智的问题.作为一个过来人,结合 ...

  7. Geeks - Detect Cycle in a Directed Graph 推断图是否有环

    Detect Cycle in a Directed Graph 推断一个图是否有环,有环图例如以下: 这里唯一注意的就是,这是个有向图, 边组成一个环,不一定成环,由于方向能够不一致. 这里就是添加 ...

  8. C语言指针实现字符串的反转

    题目要求: 编敲代码:从键盘随意输入一个字符串,输出该字符串. 然后.将该字符串逆序存放后再输出,要求用字符指针完毕. 代码: //解法一 #include <stdio.h> #incl ...

  9. windows脚本(VBS)之cmd命令行的妙用

    windows脚本(VBS)之cmd命令行的妙用 (2009-08-06 13:40:55) 转载▼ 标签: 脚本 cmd 命令行 vbs js 简单 公式 windows it 分类: 计算机 脚本 ...

  10. hdu 4768 异或运算

    http://acm.hdu.edu.cn/showproblem.php?pid=4768 貌似非常多人是用的二分 可是更好的做法貌似还是异或 对于第k个人.假设他接到偶数个传单.那么异或的结果还是 ...