以上导航会自动适应各个尺寸的屏幕
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />
<meta name="format-detection" content="telephone=no" />
<!--[if it IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"> </script>
<![endif] -->
<style>
body{margin: 0}
.container{width: 80%; margin: auto;}
.header{background-color: #333;}
li a{color: white;}
@media screen and (max-width: 320px){
.logo{height: 40px;}
.header{height: 40px;}
li{
line-height: 50px;
padding:0 15px 0 15px;
display: block;
background-color: #333;
text-align: center;
border-top: 1px solid white;
}
.logo{display: block;}
}
/* 这里定义了窗体宽度在 320px 以下的样式 */
@media screen and (min-width: 320px) and (max-width: 765px) {
.logo{height: 50px;}
.header{height: 50px;}
li{
line-height: 50px;
padding: 0 15px 0 15px;
display: block;
background-color: #333;
text-align: center;
border-top: 1px solid white;
}
.logo{ display: block;}
}
/* 这里定义了窗体宽度 320px 到 765px 的样式 */
@media screen and (min-width: 765px) {
.logo{height: 60px}
.header{height: 60px;}
li{display: block; line-height: 60px; float: left; padding: 0 15px 0 15px;}
.logo{display: block; float: left;}
}
/* 这里定义了窗体宽度 765px 以上的样式 */
</style>
</head>
<body>
<div class="header">
<div class="container">
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
</div>
</div>
</body>
</html>
参考《CSS高效开发实战》 P102