基本概念DPI：dotsperinch，意思是每英寸有多少个像素点，我一般称之为像素密度，简称密度分辨率：水平和垂直方向的像素点数。世界上有许多屏幕密度不同的手机。什么是屏幕密度？就是dpi，也就是单位长度的像素数。试想一下，如果这些手机的尺寸相同，屏幕密度相差很大，是不是意味着一台手机横向像素点少，另一台手机横向像素点多？所以经常会出现同样的背景图片在相同设备尺寸的Android设备和iOS设备上不一致，一张稍微模糊一点，另一张清晰一些，大小一样。这是因为DPI不一样，也就是渲染出来的图像像素不一样。兼容的思想就是基于这种情况，出现了2x和3x尺寸图片的概念。简单的说，我们在1xDPI、2xDPI的屏幕设备、3xDPI的屏幕设备上使用2x大小的图片，使用3倍于网上图片的尺寸，来保持图片的高清。通常将图片尺寸的2倍和图片尺寸的3倍称为2x。为什么1xDPI也使用2x画面？因为图片缩小的时候不会模糊，既然缩小的时候不会模糊，为什么不全用3x的图片呢？为了提高性能，如果所有图片都使用3x图片，会增加手机流量的消耗，页面加载速度也会大大降低。实现方法首先保证两组图片的名称以@2x.png和@3x.png结尾，同一张图片，两组名称相同，只是后缀不同，如下图：用less写一个通用的函数，通过媒体查询选择对应的图片。bg-image(@picname){background-image:url("../images/@{picname}@2x.png");@media(-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){background-image:url("../images/@{picname}@3x.png");}}使用时调用该函数。test{.bg-image('clied');}手机有2倍密度的效果图，应用2倍图片切换到3倍密度对于手机，自动改为3倍图片压缩图片（彩蛋）。稍大的图片通常需要无损压缩来提升性能体验；压缩图片的工具有很多，但或多或??少都会有一些缺陷。推荐一个在线压缩的网站：https://tinypng.com
