关于web app 背景图片兼容问题

 1. 目的

     
     
前几天接到资本主义家的通知，命我在一个星期内搞一个订餐web app出来。 于是乎，为了使得
menu与page在一起使用的时候拥有更多空间，我运用了jQuery mobile框架的Panel responsive。然，
原menu demo是没有 icon 的（图1），我的目的是让每个 li 有相应的 icon（图2）。

图1：

图2：

 2. 开工

在相应的 li 下添加以下代码：

    body #nav-panel .icon1{
	background:url(../images/index.png) no-repeat;
    }

   

哈哈，背景有了。可是...图片却是这样的：

这是由于web与web app不同分辨率下图片显示的差别，于是接下来我们需要解决的是，在不同的分辨率下替换图片

代码如下：

<pre name="code" class="html">body #nav-panel .icon1{
	background:url(../images/index.png) no-repeat;
	background-image:-webkit-image-set(url(../images/index.png)12x,url(../images/index22.png)12x);
}

里面添加了