uniapp中适配1x与2x图片需结合设备像素比（DPR）动态处理，核心思路是通过uni.getSystemInfoSync()获取设备DPR，将1x（低分辨率）与2x（高分辨率）图片分别存放于static/1x与static/2x目录，再在模板中通过条件判断动态绑定图片路径：当DPR≥2时引入2x图片，否则使用1x图片，`，或结合CSSimage-set`属性（需注意兼容性），此方法能确保在不同设备上显示清晰，避免资源浪费或模糊问题，适配多端开发需求。
Uniapp中1x与2x图片适配处理指南
在移动端应用开发中,图片适配是保证用户体验的关键环节，由于不同设备的屏幕像素密度（DPI，即设备像素比DPR）存在差异，直接使用同一尺寸的图片会导致高DPR设备（如Retina屏）显示模糊，而低DPR设备则可能浪费资源，Uniapp作为跨端开发框架，提供了灵活的方案来处理1x（标准分辨率）和2x（高分辨率）图片的适配问题，本文将详细介绍Uniapp中1x与2x图片的处理逻辑、实现方法及最佳实践。
为什么需要处理1x与2x图片？
设备像素比（DPR）的差异
设备的屏幕像素比是指物理像素与逻辑像素的比值。
- 普通屏幕：DPR=1（如部分低端Android手机），1个逻辑像素对应1个物理像素。
- 高清屏幕：DPR=2（如iPhone 6/7/8、大部分Android旗舰机），1个逻辑像素对应2个物理像素，即同样尺寸的图片在高清屏上会被“压缩”显示，导致模糊。
用户体验与性能的平衡
- 模糊问题：若仅使用1x图片，在DPR=2的设备上，图片会被拉伸显示，边缘模糊，影响视觉体验。
- 性能问题：若仅使用2x图片，在DPR=1的设备上，图片体积过大（2x图片体积约为1x的4倍），会增加加载时间，消耗用户流量。
Uniapp中1x与2x图片的处理方案
图片资源准备：规范命名与目录结构
在开始适配前,需先准备1x和2x两套图片资源，并通过命名规则或目录分类进行区分，便于动态加载。
（1）命名规则法
在图片文件名后添加@1x和@2x后缀，
- 1x图片：
icon@1x.png（尺寸100x100逻辑像素） - 2x图片：
icon@2x.png（尺寸200x200逻辑像素，即1x的2倍）
（2）目录分类法
在static目录下创建1x和2x子文件夹，分别存放不同分辨率的图片：
static/
├── 1x/
│ ├── icon.png
│ └── bg.png
└── 2x/
├── icon.png
└── bg.png动态加载：根据DPR选择图片
Uniapp提供了uni.getSystemInfoSync()或uni.getSystemInfo() API，可获取设备的pixelRatio（即DPR），通过判断pixelRatio的值动态选择加载1x或2x图片。
（1）基于JS动态拼接图片路径
// 获取设备像素比 const pixelRatio = uni.getSystemInfoSync().pixelRatio; // 根据DPR选择图片路径 const imagePath = pixelRatio >= 2 ? '/static/2x/icon.png' : '/static/1x/icon.png'; // 在模板中使用 <image :src="imagePath" mode="aspectFit"></image>
（2）封装全局图片加载函数
为避免重复代码,可将图片路径选择逻辑封装为全局函数，在项目中复用：
// utils/imageLoader.js
export function getImagePath(filename) {
const pixelRatio = uni.getSystemInfoSync().pixelRatio;
return pixelRatio >= 2
? `/static/2x/${filename}`
: `/static/1x/${filename}`;
}
在页面或组件中调用：
import { getImagePath } from '@/utils/imageLoader';
export default {
data() {
return {
iconPath: getImagePath('icon.png')
};
}
};
CSS适配：通过background-size控制显示尺寸
若图片通过CSSbackground-image加载，需结合background-size确保图片在不同DPR下正确显示：
/* 1x图片容器 */
.icon-1x {
width: 100px;
height: 100px;
background-image: url('/static/1x/icon.png');
background-size: 100% 100%; /* 按容器尺寸显示 */
}
/* 2x图片容器 */
.icon-2x {
width: 100px;
height: 100px;
background-image: url('/static/2x/icon.png');
background-size: 100% 100%; /* 按容器尺寸显示，避免过大 */
}
通过JS动态切换类名：
const pixelRatio = uni.getSystemInfoSync().pixelRatio; const iconClass = pixelRatio >= 2 ? 'icon-2x' : 'icon-1x;
使用Uniapp的image组件优化
Uniapp的<image>组件支持mode属性，可控制图片的裁剪和缩放方式，结合动态加载的1x/2x图片，可进一步提升显示效果：
<image :src="imagePath"
