如何使iPhone的CSS菜单动态化？

代码如下：

<ul id="menu">
<li class="routesearch"><a class="selected" href="#">Route Search</a></li>
<li class="routehistory"><a class=href="#">Route History</a></li>
<li class="dailyschedule"><a href="#">Daily Schedule</a></li>
<li class="preferences"><a href="#">Preferences</a></li>
</ul>


<style type="text/css">

#menu {

margin:0; padding:0; list-style:none; clear:both; }

#menu li {

overflow:hidden; text-indent:-9999px; display:inline; float:left; }

#menu li a {

background:url('http://imgur.com/QR63R.png') no-repeat; width:100%; height:100%; display:block; }

#menu li.routesearch {width:100px; height:49px;}

#menu li.routesearch a:hover {background-position:0px -49px}

#menu li.routesearch a.selected {background-position:-5px -145px;}

#menu li.routesearch a.selected {background-position:0px -99px;}

#menu li.routehistory {width:100px; height:49px;}

#menu li.routehistory a {background-position:-100px 0px}

#menu li.routehistory a:hover {background-position:-100px -49px}

#menu li.routehistory a.selected{background-position:-100px -99px;}

#menu li.dailyschedule {width:105px; height:49px;}

#menu li.dailyschedule a {background-position:-200px 0px}

#menu li.dailyschedule a:hover {background-position:-200px -49px}

#menu li.dailyschedule a.selected{background-position:-200px -99px;}

#menu li.preferences {width:100px; height:49px;}

#menu li.preferences a {background-position:-305px 0px}

#menu li.preferences a:hover {background-position:-305px -49px}

#menu li.preferences a.selected{background-position:-305px -99px;}

</style>

#菜单{
边距：0；填充：0；列表样式：无；清除：两者；}
#菜单里{
溢出：隐藏；文本缩进：-9999px；显示：内联；浮点：左；}
#菜单李a{
背景：url（'http://imgur.com/QR63R.png“）不重复；宽度：100%；高度：100%；显示：块；}
#菜单li.routesearch{宽度：100px；高度：49px；}
#菜单li.routesearch a:悬停{背景位置：0px-49px}
#菜单li.routesearch a.selected{背景位置：-5px-145px；}
#菜单li.routesearch a.selected{背景位置：0px-99px；}
#菜单li.routehistory{宽度：100px；高度：49px；}
#菜单li.routehistory a{背景位置：-100px 0px}
#菜单li.routehistory a:悬停{背景位置：-100px-49px}
#菜单li.routehistory a.selected{背景位置：-100px-99px；}
#菜单li.dailyschedule{宽度：105px；高度：49px；}
#菜单li.dailyschedule a{背景位置：-200px 0px}
#菜单li.dailyschedule a:悬停{背景位置：-200px-49px}
#菜单li.dailyschedule a.selected{背景位置：-200px-99px；}
#菜单li.preferences{宽度：100px；高度：49px；}
#菜单li.preferences a{背景位置：-305px 0px}
#菜单li.preferences a:悬停{背景位置：-305px-49px}
#菜单li.preferences a.所选{背景位置：-305px-99px；}

---

有人知道如何使图像灵活或适合iPhone屏幕吗？

创建一个水平宽度

480px（iPhone屏幕的水平宽度）的图像，并使用：

<link rel="stylesheet" href="iPhoneStylesheet.css" media="only screen and (max-device width:480px)" />

#menu li a {
    background-image: url('path/to/the/480px_wide_image.png');
}