hbuilderX的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>

hbuilderX的upx单位是什么鬼？相关推荐

upx与px互相转换
原文地址:https://www.jianshu.com/p/ff88a9d2a1aa 随着越来新技术的诞生,跨平台的各种方案层出不穷,其跨平台所设计单位也各有不同.为了实现不同平台的尺寸转换,也出现 ...
vue二维码生成可自定义logo
代码已上传至github github代码地址:https://github.com/Miofly/mio.git <template xlang="wxml">< ...
uni-app/js/小程序/生成支付二维码图片，类似于支付宝和微信商家码
业务需求一个电子商务公司需要一个支付功能,该支付功能通过微信扫码或者支付宝扫码实现的,并且该二维码商户可以下载下来,类似于微信商家码.如下图,鉴于公司相关的保密协议,我马赛克了头部和中间的商标相关说 ...
uni-app如何自定义内容生成二维码？
学而不思则罔,思而不学则殆 uni-app 生成二维码 1. 创建uni-app项目 2.HbuildX插件市场安装相关插件 3.使用该插件 3.1 在需要使用的页面进行引入 3.2 页面上使用该插件 ...
uniapp 电商app 下载页面功能实现
下载页面效果图要求如下: 立即邀请按钮是个动态的,上下浮动并且尺寸或大或小的改变,可以通过css3动画来实现二维码是生成的,这个二维码是含有用户邀请码的,如果通过此二维码进行下载app. 点击保存 ...
uniapp html2canvas 生成图片
下载插件 html2canvas.min.js 直接粘贴复制下面的也可以 /*!* html2canvas 1.0.0-rc.3 <https://html2canvas.hertzen.co ...
【uniapp】视频分享预览小程序
六一收到个不同以往的需求,我的指导老师最近有点忙,让我们帮忙做一个可以通过二维码预览视频的小程序收到需求后,因为只是临时用一下,不打算写一套完整的系统,所以大概的思路就是,其他成员将视频通过ftp传 ...
uni-app之响应式单位upx和rpx
一.upx uni-app 使用 upx 作为默认尺寸单位, upx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应. uni-app 规定屏幕基准宽度750upx. 开发者可以通过设计稿基准宽度 ...
推荐使用rpx替代upx的公告
推荐使用rpx替代upx的公告分类:uni-app rpx upx upx在2018年就推出了,其初衷是为了让微信的rpx机制可以跨全端使用. 在普通css写法里,upx会被编译器编译.但动态绑定时 ...

hbuilderX的upx单位是什么鬼？

hbuilderX的upx单位是什么鬼？相关推荐

最新文章

热门文章