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

<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');
}

如何让这个CSS菜单动态为iPhone？

1 个答案: