uniapp单位

uniapp中的单位系统

uniapp支持多种单位系统，包括px、rpx、rem、vw/vh等。不同单位在不同场景下具有各自的优势，开发者需根据项目需求选择合适的单位。

px（像素）

px是绝对单位，1px对应屏幕上的一个物理像素点。在uniapp中直接使用px时，元素大小在不同设备上固定不变，可能导致在高分辨率屏幕上显示过小。

/* 示例 */
.element {
  width: 100px;
  height: 50px;
}

rpx（响应式像素）

rpx是uniapp推荐的响应式单位，可根据屏幕宽度自适应。设计原理：以750rpx为基准宽度，1rpx = 屏幕宽度/750。当屏幕宽度为750物理像素时，1rpx=1px。

/* 示例 */
.container {
  width: 750rpx; /* 在750px宽度的设备上等于750px */
  padding: 20rpx;
}

rem（根元素字体大小）

rem基于根元素(html)的font-size计算。uniapp中默认1rem=16px，可通过配置修改基准值。在pages.json中设置：

{
  "window": {
    "rpxCalcMaxDeviceWidth": 960,
    "rpxCalcBaseDeviceWidth": 375,
    "rpxCalcIncludeWidth": 750
  }
}

vw/vh（视窗单位）

1vw等于视窗宽度的1%，1vh等于视窗高度的1%。这些单位在需要相对于视窗尺寸的元素上很有用。

/* 示例 */
.full-screen {
  width: 100vw;
  height: 100vh;
}

单位选择建议

开发移动端优先选择rpx，可自动适配不同屏幕尺寸。需要精确控制元素大小时考虑px。rem适合需要根据根字体大小调整布局的场景。vw/vh适用于全屏或相对于视口的元素。