Как я могу сделать это меню CSS динамичным для iPhone?

Question

Вот код:

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

Кто-нибудь знает, как я могу сделать изображение гибким или что-то подходящее для экрана iPhone?

Answer 1

Создайте изображение горизонтальной ширины 480px (горизонтальная ширина экрана iPhone) и используйте @ media query :

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

В iPhoneStylesheet.css переопределите:

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