UNI-APP开发之style单位(upx、rpx、vw、vh、px)之间的转换

  1.vw:1vw等于视口宽度的1%。    100vw等于窗口的宽度

  2.vh:1vh等于视口高度的1%。    100vh等于窗口的高度

  3.vmin:选取vw和vh中最小的那个。

  4.vmax:选取vw和vh中最大的那个。

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>

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。

规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px

设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
iPhone5 1rpx = 0.42px    1px = 2.34px
iPhone6 1rpx = 0.5px     1px = 2rpx
iPhone6s 1rpx = 0.552px    1px = 1.81rpx

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值