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

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。
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,但是这个这是一个大坑,不能动态赋值解决办法的更多相关文章
- 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 ...
- 关于iphone6安装了727个应用后,更新app 导致一些app无法更新,无法删除,重启后消失,但是却还是占用空间的解决办法
我的iphone6 苹果手机,64GB的,存储空间最近一直很吃紧,很捉急,昨天,终于下定决心 解决下这个问题. 由于 空间大,我又随便安装许多APP,现在有727个app,常用的其实就是那个几十个而已 ...
- mac安装软件运行提示「xxx.app已损坏,打不开.你应该将它移到废纸篓」的解决办法
「xxx.app已损坏,打不开.你应该将它移到废纸篓」,其实并非你安装的软件已损坏,而是Mac系统的安全设置问题,往往这些软件可能是经过了汉化或者破解,所以被Mac认为「已损坏」,那么解决方法就是临时 ...
- appium1.4+华为8.0执行自动化脚本,报启动session失败,原因是unicode_ime_apk\Uni codeIME-debug.apk在手机上已存在,再次安装失败,导致启动session失败,解决办法:换高版本的appium
最开始做Android自动化测试时,通过执行脚本发现报,已安装UnicodeIME-debug.apk,再次安装失败,当时觉得这个apk对我来说没用,就把D:\Program Files (x86)\ ...
- CSS中的自适应单位vw、vh、vmin、vmax
1.vw.vh.vmin.vmax各单位的意义 上面的自适应单位可以统称为视口单位. 可以先了解一下视口指的是什么? 在PC端,视口指的是在PC端,指的是浏览器的可视区域:而在移动端,它涉及3个视口: ...
- uni app中使用自定义图标库
项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...
- 小账本APP——软件项目风险管理及解决办法案例
小账本APP——软件项目风险管理及解决办法案例 摘要 软件项目风险是指在软件开发过程中遇到的预算和进度等方面的问题以及这些问题对软件项目的影响.软件项目风险会影响项目计划的实现,如果项目风险变成现实, ...
- 安卓,支付宝app登录时,提示 服务器安全证书已过期或不可信任,请问怎么解决
安卓,支付宝app登录时,提示 服务器安全证书已过期或不可信任,请问怎么解决 请把手机时间调成当前时间.
- Unity多单位战斗寻路问题的一种解决办法
Unity多单位战斗寻路问题的一种解决办法 Unity提供了NavMesh 导航组件 NavMesh是在实践中通用性最好的一种导航方式,但是Unity的实现并没有完全提供一个开放自由的API. 主 ...
随机推荐
- Django获取当前页面的URL——小记
获取带参数URL:request.get_all_path() 获取不带参数URL:request.path 获取主机地址:request.get_host()
- 利用C语言中的函数指针实现c++中的虚函数
C语言中的函数指针 #include<stdio.h> int fun1(int a) { return a*a; } int fun2(int a) { return a*a*a; } ...
- Delphi春天将来临,Android遇到XE7我也是醉了,Hello World
回首往日,从Delphi 7走到如今.总感觉不愠不火.期间论坛倒掉无数,没倒掉的也半死不活,大批的程序猿转向C#,Java,PHP. Delphi的开发高效有目共睹,一直不忍放弃.Delphi以前一夜 ...
- ctags的基本操作总结
ctags用法 说明: a. ctags能够分析程序生成tags文件: b. 生成的tags文件,能够用 vi -t 查找结构体,数据类型,函数名所在位置.非常方便: ct ...
- (5)QlikView中的RowNo()函数
函数介绍 RowNo()返回当前行的行号,在QlikView载入后的数据表中.第一行的值是1. 使用注意:此函数没有參数.可是括号不能省略. 适用范围,能够用于Load脚本,也能够用于Chart的表达 ...
- mac Homebrew Updating慢,替换及重置Homebrew默认源
替换成清华的镜像: https://lug.ustc.edu.cn/wiki/mirrors/help/brew.git
- vsftpd出现“Response: 500 OOPS: cannot change directory”解决方法(转载)
vsftpd出现“Response: 500 OOPS: cannot change directory”解决方法 笔者用的Linux发行版本为centos当用FTP客户端连接时,出现如下错误提示 ...
- 二分图染色模板(P1330 封锁阳光大学)
二分图染色模板(P1330 封锁阳光大学) 题目描述 曹是一只爱刷街的老曹,暑假期间,他每天都欢快地在阳光大学的校园里刷街.河蟹看到欢快的曹,感到不爽.河蟹决定封锁阳光大学,不让曹刷街. 阳光大学的校 ...
- P1228 地毯填补问题(分治)
P1228 地毯填补问题(分治) 题目描述 相传在一个古老的阿拉伯国家里,有一座宫殿.宫殿里有个四四方方的格子迷宫,国王选择驸马的方法非常特殊,也非常简单:公主就站在其中一个方格子上,只要谁能用地毯将 ...
- bzoj4977 跳伞求生——贪心
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4977 今天讲的贪心题,真神奇啊: 首先,要得到尽量多选队友的解: 把队友按 a[i] 从小到 ...