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

  • 前端
    tags:
  • uni-app
    date: 2019-03-01

px与upx换算

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

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

注意事项

  • 动态绑定的 style 不支持直接使用 upx，使用时需要使用 uni.upx2px(Number) 转换为 px 后再赋值。
  1. <template>
  2.     <view>
  3.         <view class="half-width" :style="{width: halfWidth}">
  4.             半屏宽度
  5.         </view>
  6.     </view>
  7. </template>
  9. <script>
  10.     export default {
  11.         computed: {
  12.             halfWidth() {
  13.                 return uni.upx2px(750 / 2) + 'px';
  14.             }
  15.         }
  16.     }
  17. </script>
  18. <style>
  19.     .half-width {
  20.         background-color: #FF3333;
  21.     }
  22. </style>

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

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

  • **在 uni-app 中不能使用 选择器。
  • page 相当于 body 节点，例如：
  1. // 设置页面背景颜色
  2. page {
  3.   background-color:#ccc;
  4. }

全局样式与局部样式

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

背景图片

  • 支持 base64 格式图片。
  • 支持网络路径图片。

  • 使用本地路径图片需注意：

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

未完待续