uni-app 微信小程序——尺寸大小

设计稿中微信小程序一般宽度设为375px，对应到uniapp就是750rpx宽度

uni-app支持通用css单位px，rpx

1.   px即屏幕像素
2.   rpx即响应式px,一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准。750rpx恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会等比放大。

vue页面支持普通h5单位，但在nvue里不支持

1.  rem默认根字体大小为屏幕宽度/20（微信小程序，头条小程序，APP，H5)
2. vh viewpoint height 视窗高度，1vh等于视窗高度的1%
3. vw viewpoint width 视窗宽度，1vw等于视窗宽度的1%

rpx详细说明

1. 微信小程序设计了rpx解决这个问题。uni-app在APP端，H5端都支持了rpx
2. rpx是相对于基准宽度的单位。可以根据屏幕宽度进行自适应
3. uni-app规定屏幕基准宽度750rpx.
4. 开发者可以通过设计稿基准宽度计算页面元素rpx值，设计稿1px与框架样式1rpx转换公式如下：换言之，页面元素高度在uni-app中的宽度计算公式：

        750*元素在设计稿中的宽度/设计稿基准宽度

举例说明：

1.若设计稿宽度为750px,元素A在设计稿上的宽度为100px,那么元素A在uni-app里面宽度应该设为750*100/750结果为:100rpx

2.若设计稿宽度为375px,元素A在设计稿上的宽度为200px,那么元素A在uni-app里面宽度应该设为750*100/375结果为:400rpx

注意：

1. rpx是和宽度相关单位。屏幕越宽，该值实际像素越大。如不想根据屏幕宽度缩放，则应使用px单位
2. 如果开发者在字体或高度中也使用了rpx,那么需注意这样写法意味着随屏幕变宽，字体会变大，高度会变高，如果需要固定高度，则应该用px
3. rpx不支持动态横竖屏切换计算，使用rpx建议锁定屏幕方向
4. 设计师可以用iPhone6作为视觉稿的标准。
5. 如果设计稿不是750px,HbuilderX提供了自动换算工具