uniapp多终端适配
uniapp多终端适配方法
uniapp作为跨平台开发框架，支持一套代码编译到多个平台（H5、小程序、App等）。多终端适配需考虑不同平台的特性差异，以下为关键方法：
样式适配
使用Flex布局或Grid布局实现响应式设计，避免固定宽度。通过rpx单位替代px，rpx会根据屏幕宽度自动缩放，1rpx≈0.5px（以750px设计稿为基准）。
媒体查询适配不同屏幕尺寸：
@media screen and (max-width: 600px) {
.container { flex-direction: column; }
}条件编译处理平台差异 通过注释语法实现不同平台的代码逻辑分离，示例：
// #ifdef H5
console.log('仅在H5平台执行');
// #endif
// #ifdef MP-WEIXIN
console.log('仅微信小程序执行');
// #endif动态API调用 检测运行环境选择对应API，例如获取设备信息：
const systemInfo = uni.getSystemInfoSync();
if (systemInfo.platform === 'android') {
// Android特定逻辑
}多端组件兼容
使用uniapp内置组件如<view>、<text>替代HTML标签。自定义组件时通过props和slot保持接口一致，内部根据平台差异化实现。
图片与资源适配
使用@2x和@3x后缀管理多倍图，或通过CDN服务动态返回适配当前设备的图片。推荐将资源放在static目录，编译时自动处理路径。
测试与调试
真机测试必不可少，尤其关注iOS与Android的差异。开发阶段使用uni-app调试工具，发布前需在各平台开发者工具中验证UI和功能。
性能优化
减少全局样式使用，避免复杂选择器。按需加载组件，分包处理大体积资源。App平台可使用nvue提升渲染性能。
通过以上方法可有效实现多终端适配，需注意不同平台的审核规范（如小程序有体积限制），提前规划代码结构。
