zoukankan      html  css  js  c++  java
  • upx

    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="200upx"></view>
    <!-- - 动态绑定不生效 -->
    <view class="test" :style="{winWidth + 'upx;'}"></view>
    

      

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

    <template>
        <view>
            <view  :style="{ h_Width}">
            </view>
        </view>
    </template>
    
    <script>
        export default {
            computed: {
                h_Width() {
                    return uni.upx2px(750 / 2) + 'px';
                }
            }
        }
    </script>
    当你微笑的时候,全世界都会对你微笑。
  • 相关阅读:
    复利计算
    实验四 主存空间的分配和回收
    0526 Sprint1个人总结 & 《构建之法》第八、九、十章
    实验三 进程调度模拟程序
    0427 scrum & 读后感
    0415 评论
    0414 结对2.0
    汉堡包
    0406 结对编程总结
    读《构建之法》第四章有感
  • 原文地址:https://www.cnblogs.com/liruoruo/p/10510416.html
Copyright © 2011-2022 走看看