支持的单位

经测试，uni-app支持以下CSS单位：

  • px
  • upx
  • rpx
  • rem
  • em
  • vw、vh
  • %

rpx

uni-app样式采用rpx为单位，无论什么机型的手机，将屏幕宽度切分为 750 份（即屏幕宽度锁定为750rpx，iPhone6屏幕宽度375的两倍）。

计算公式为：

  1. 页面元素宽度在 uni-app 中的宽度计算公式 = 750 * 元素在设计稿中的宽度 / 设计稿基准宽度

比如：

  • 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 640，结果为：117rpx。
  • 若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为：750 * 200 / 375，结果为：400rpx。

rpx与px转换

  1.   function rpx2px(num) {
  2.     return (num * uni.getSystemInfoSync().windowWidth) / 750
  3.   }
  5.   // 将物理像素转化为设备像素
  6.   function px2rpx(num) {
  7.     return (num * 750) / uni.getSystemInfoSync().windowWidth
  8.   }

参考：

upx与px转换

:::warning 此API已过时，建议改为rpx :::

使用 uni.upx2px(Number) 将upx转换为px

注意：动态绑定的 style 不支持直接使用 upx。

  1. <!-- - 静态upx赋值生效 -->
  2. <view class="test" style="width:200upx"></view>
  3. <!-- - 动态绑定不生效 -->
  4. <view class="test" :style="{width:winWidth + 'upx;'}"></view>

需要先换算为px再进行赋值：

  1. <template>
  2.   <view>
  3.     <view :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>

样式导入

可以直接通过 @import 导入样式。 

  1. <style>
  2. @import "../../common/uni.css";
  4. .uni-card {
  5.   box-shadow: none;
  6. }
  7. </style>

选择器

uni-app 仅支持有限的选择器：

  • .class
  • #id
  • element
  • element,element
  • ::after
  • ::before

固定值

uni-app 中以下组件的高度是固定的，不可修改：

  • 导航栏高度固定为 44px
  • tabBar 高度固定为 56px

自定义组件命名限制

自定义组件不能使用以下名称作为组件名：

  1. a、canvas、cell、content、countdown、datepicker、div、element、embed、header、image、img、indicator、input、link、list、loading-indicator、loading、marquee、meta、refresh、richtext、script、scrollable、scroller、select、slider-neighbor、slider、slot、span、spinner、style、svg、switch、tabbar、tabheader、template、text、textarea、timepicker、trisition-group、trisition、video、view、web