css --- 应用媒介查询制作响应式导航栏

在这里插入图片描述
以上导航会自动适应各个尺寸的屏幕
代码如下:

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/251501.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！