前端

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 后再赋值。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <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 节点，例如：
    1
    2
    3
    4
    // 设置页面背景颜色
    page {
      background-color:#ccc;
    }

全局样式与局部样式

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

    背景图片

  • 支持 base64 格式图片。
  • 支持网络路径图片。
  • 使用本地路径图片需注意：
    • 图片小于 40kb，uni-app 会自动将其转化为 base64 格式；
    • 图片大于等于 40kb， 需开发者自己将其转换为base64格式使用或将其挪到服务器上，从网络地址引用。
    • 本地图片的引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）。
      • 1
        2
        3
        .test2 {
             background-image: url('~@/static/logo.png');
         }

未完待续

推荐文章