博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
uni-app的专属强大自适应单位upx,但是这个这是一个大坑,不能动态赋值解决办法...
阅读量:5336 次
发布时间:2019-06-15

本文共 539 字,大约阅读时间需要 1 分钟。

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

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

 

 

转载于:https://www.cnblogs.com/putao1/p/10141875.html

你可能感兴趣的文章
Golang Import使用入门
查看>>
postgresql 获取主键字段
查看>>
GNU libmicrohttpd 0.9.24 发布
查看>>
响应式网站
查看>>
Less环境搭建
查看>>
openstack trove mongodb配置项
查看>>
poj 3481 Double Queue 数据结构 STL
查看>>
线段树模板
查看>>
jquery ajax下拉框省市联动效果实现代码
查看>>
gulp 自动化构建
查看>>
Win10创意者更新秋季版升级常见问题解决方案
查看>>
从客户端中检测到有潜在危险的 Request.Form 值。
查看>>
.NET中反射机制的使用与分析
查看>>
APP UI 设计
查看>>
Java包装类、拆箱和装箱详解
查看>>
Mysql 5.6 新特性(转载)
查看>>
Jenkins强制设置语言为中文
查看>>
子串的替换
查看>>
linux中常用的60个命令及作用详解
查看>>
poj 1664放苹果(递归)
查看>>