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

港控/mmm° 2022-12-23 12:29 726阅读 0赞

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`。

<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