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

迷南。 2022-12-24 01:52 402阅读 0赞

#### 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');
              }

#### 未完待续 ####