Comment puis-je rendre ce menu CSS dynamique pour l'iPhone?

Question

Voici le code:

<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> 

Quelqu'un sait comment je peux rendre l'image flexible ou quelque chose pour s'adapter à un écran d'iPhone?

Answer 1

Créer une image de largeur horizontale 480px (la largeur horizontale de l'écran de l'iPhone) et utiliser @media queries:

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

Dans le iPhoneStylesheet.css Redéfinir:

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