uniapp自适应
uniapp自适应方案
uniapp实现自适应主要依靠弹性布局、百分比单位、rpx单位以及媒体查询等技术。以下为常用方法：
使用rpx单位 rpx是uniapp特有的自适应单位，可根据屏幕宽度自动调整大小。设计稿通常以750px为基准，1rpx等于屏幕宽度除以750。在CSS中直接使用rpx单位即可实现元素自适应。
.container {
width: 750rpx; /* 满屏宽度 */
font-size: 28rpx; /* 自适应字体 */
}Flex弹性布局
Flex布局能自动分配容器内元素的空间，适合构建响应式界面。通过设置display: flex和相关属性实现元素的自适应排列。
.parent {
display: flex;
justify-content: space-between;
}
.child {
flex: 1;
}百分比与视口单位 结合百分比（%）和视口单位（vw/vh）可实现基于屏幕尺寸的缩放。例如，设置宽度为50%表示占父容器一半，而50vw则表示占视口宽度的一半。
.box {
width: 50%;
height: 20vh;
}媒体查询适配
通过@media针对不同屏幕尺寸编写差异化样式。适用于复杂布局或特定设备的样式调整。
@media screen and (max-width: 600px) {
.header {
font-size: 24rpx;
}
}uniapp内置组件适配
uniapp的<view>、<text>等组件默认支持自适应特性。推荐优先使用这些组件而非HTML原生标签，以确保跨平台兼容性。
动态计算样式
在JavaScript中通过uni.getSystemInfoSync()获取屏幕信息，动态计算样式值并应用到元素上。
const systemInfo = uni.getSystemInfoSync();
const windowWidth = systemInfo.windowWidth;
this.setData({
elementWidth: windowWidth * 0.8
});注意事项
- 设计稿建议使用750px宽度，便于rpx单位换算。
- 避免固定像素（px）单位，优先使用rpx或百分比。
- 图片资源可通过
mode="widthFix"实现高度自适应。 - 测试时需覆盖不同尺寸设备，确保布局一致性。
