生活随笔
收集整理的這篇文章主要介紹了
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
總結
以上是生活随笔為你收集整理的css --- 应用媒介查询制作响应式导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
