UNIAPP 样式单位--坑

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

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替代upx的公告

从HBuilderX 2.0.5起，已经支持rpx的正常着色和px2rpx的ide代码提示转换功能。

官方也修改了uni-app文档中关于尺寸单位的介绍，不再推荐upx的使用，而推荐rpx。

开发者仍然可以使用upx和uni.upx2px，也可以改用rpx，都可以。没有必要批量调整老代码。但新开发还是应该使用rpx。

注意：

顺便提醒另一个事情，很多开发者对响应式单位依赖太严重了，比如组件高度或字体大小也使用upx/rpx。

注意只有当你需要某元素的单位要根据屏幕宽度大小变化时，才需要rpx这类动态宽度单位。

一般情况下高度和字体大小是不应该根据屏幕宽度变化的。

 

其他相关博客：关于uni-app你需要小心的坑