uni-app开发APP之px与upx转换

px与upx换算

• upx是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app规定屏幕基准宽度为750upx

• 计算方法：设计稿1px / 设计稿基准宽度 = 框架样式 1upx / 750upx，换言之，页面元素宽度在 uni-app 中的宽度计算公式750 * 元素在设计稿中的宽度 / 设计稿基准宽度
• 也就是说，先量出设计稿中某一块的px，然后看这个设计稿有几个px宽，计算出这一块在设计稿总所占比例，然后乘以750就是这一块要用的upx值了。

注意事项

• 动态绑定的 style 不支持直接使用 upx，使用时需要使用 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>

• 可以使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

• 静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

• 在 uni-app 中不能使用 * 选择器。
• page 相当于 body 节点，例如：

// 设置页面背景颜色
page {
  background-color:#ccc;
}

全局样式与局部样式

• 定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。
• App.vue 中通过 @import 语句可以导入外联样式，一样作用于每一个页面。

背景图片

• 支持 base64 格式图片。
• 支持网络路径图片。
• 使用本地路径图片需注意：
  • 图片小于 40kb，uni-app 会自动将其转化为 base64 格式；
  • 图片大于等于 40kb， 需开发者自己将其转换为base64格式使用或将其挪到服务器上，从网络地址引用。
  • 本地图片的引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）。
    *

     .test2 {
          background-image: url('~@/static/logo.png');
      }
    

未完待续