devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

响应式菜单--@media screen的应用_@media screen用法

作者：繁依Fanyi0 | 2024-03-29 10:04:11

赞

踩

@media screen用法

在不同分辨率的窗口下，菜单显示不同的样式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.     @font-face{
  10.         font-family:'icon-font';
  11.         src: url('font/flat-ui-icons-regular.ttf'), url('font/flat-ui-icons-regular.eot'), url('font/flat-ui-icons-regular.woff'), url('font/flat-ui-icons-regular.svg');
  12.     }
  13.     *{
  14.         margin: 0%;
  15.         padding: 0%;
  16.     }
  17.  
  18.     body{
  19.         background: #FFF;
  20.         margin: 5%;
  21.         font-family:"Helvetica Neue", sans-serif;
  22.     }
  23.  
  24.     #page-nav{
  25.         position: relative;
  26.     }
  27.  
  28.     #page-nav-list li{
  29.         display: block;
  30.         float: left;
  31.         width: 16.66%;
  32.     }
  33.  
  34.     #page-nav-list li a{
  35.         display: block;
  36.         text-decoration: none;
  37.         /* 文字垂直居中,高度为定值*/
  38.         text-align: center;
  39.         font-size: 1.2em;
  40.         line-height: 4em;
  41.         color:#FFF;
  42.         
  43.     }
  44.  
  45.     #page-nav-list li a::before{
  46.         font-family: 'icon-font';
  47.         margin-left: -1em;
  48.         margin-right: 1em;
  49.         /*content分开写*/
  50.     }
  51.  
  52.     #page-nav-list li:nth-child(1) a{
  53.         background:#1ABC9C;
  54.     }
  55.     #page-nav ul li:nth-child(2) a{
  56. 	    background:#2ECC71;
  57.     }
  58.     #page-nav ul li:nth-child(3) a{
  59. 	    background:#F1C40F;
  60.     }
  61.     #page-nav ul li:nth-child(4) a{
  62. 	    background:#E67E22;
  63.     }
  64.     #page-nav ul li:nth-child(5) a{
  65. 	    background:#E74C3C;
  66.     }
  67.     #page-nav ul li:nth-child(6) a{
  68. 	    background:#9B59B6;
  69.     }
  70.     #page-nav ul li a:hover{
  71. 	    background:#333;
  72.     }
  73.     #page-nav ul li:nth-child(1) a::before{
  74. 	    content:"\e62e";
  75.     }   
  76.     #page-nav ul li:nth-child(2) a::before{
  77.         content:"\e62a";
  78.     }
  79.     #page-nav ul li:nth-child(3) a::before{
  80. 	    content:"\e631";
  81.     }
  82.     #page-nav ul li:nth-child(4) a::before{
  83. 	    content:"\e644";
  84.     }
  85.     #page-nav ul li:nth-child(5) a::before{
  86. 	    content:"\e62d";
  87.     }
  88.     #page-nav ul li:nth-child(6) a::before{
  89. 	    content:"\e629";
  90.     }
  91.  
  92.     /* 添加媒体查询，屏幕宽度小于980时，图标显示在文字的上方
  93.     after元素转换为块元素，调整高度*/
  94.     @media screen and (max-width: 979px) {
  95.         #page-nav ul li a::before{
  96.             display:block;
  97.             margin: 0 auto;
  98.             line-height: 1;
  99.             padding-top: 2em;
  100.         }
  101.     }
  102.  
  103.     /* 当屏幕宽度小于768像素时，隐藏文字，只显示图标，并将菜单的图标从动态的4em变为
  104.     固定的80px，此时图标的文字大小也不能使用em了，因为在父元素li的font-size为0的
  105.     情况下，任何大小的em的数值均为0，在此将其设置为20px*/
  106.     @media screen  and (max-width: 767px){
  107.         #page-nav ul li a{
  108.             font-size: 0;
  109.             height: 80px;
  110.         }
  111.         #page-nav ul li a::before{
  112.             font-size: 20px;
  113.             line-height: 80px;
  114.             text-align: center;
  115.             margin: 0%;
  116.             padding: 0%; /*继承padding-top: 2em;重置*/
  117.         }
  118.     }
  119.  
  120.     /* 480px时，将菜单显示为一个菜单图标，点击时展开全部的图标，使用JS动态吃哈如图标*/
  121.     /* 默认情况下不显示*/
  122.     #menutoggle{
  123.        display:none;
  124.     }
  125.     @media screen and (max-width: 480px) {
  126.         #menutoggle{
  127.             display:block;
  128.             width: 100%;
  129.             height: 60px;
  130.             text-align: left;
  131.             text-indent: 60px;
  132.             font-size: 1.5em;
  133.             color: #FFF;
  134.             cursor: pointer;
  135.             background:#000;
  136.             border:none;/*去掉button的边框*/
  137.             position: relative;/* 用于按钮图标的定位*/
  138.         }
  139.  
  140.          /* 绘制menu之前的三条横线*/
  141.         #menutoggle::after{
  142.             content: '';
  143.             width:22px;
  144.             box-sizing: border-box;
  145.             box-shadow: 0 10px 0 2px #FFF, 0 20px 0 2px #FFF, 0 30px 0 2px;
  146.             position: absolute;
  147.             left: 20px;
  148.             top: 10px;
  149.         }   
  150.  
  151.         /*隐藏列表,并将li横向显示*/
  152.         #page-nav-list{
  153.             display: none;
  154.         }
  155.  
  156.         #page-nav-list li{
  157.             width: 100%;/* 继承上一步的样式，只有图标纵向排列*/
  158.         }
  159.        
  160.         /* 显示图标和文字，图标在左，文字在右*/
  161.         #page-nav ul li a{
  162. 		    text-align:left;
  163. 		    font-size:1.2em;
  164. 		    text-indent:3.5em;
  165. 	    }
  166. 	    #page-nav ul li a::before{
  167. 		    position:absolute;
  168. 		    left:-2em;
  169. 	    }  
  170.         
  171.         /* + 代表相邻， 创建显示类，点击menu之后菜单显示或者消失*/
  172.         #menutoggle.active + ul{
  173.             display: block;
  174.         }
  175.     }
  176.    
  177.     </style>
  178. </head>
  179. <body>
  180.     <nav id="page-nav">
  181.         <ul id="page-nav-list">
  182.           <li><a href="" id="home">Home</a></li>
  183.           <li><a href="" id="photo">Photo</a></li>
  184.           <li><a href="" id="user">User</a></li>
  185.           <li><a href="" id="document">Document</a></li>
  186.           <li><a href="" id="chat">Chat</a></li>
  187.           <li><a href="" id="video">Video</a></li>
  188.         </ul>
  189.       </nav>
  190.  
  191.     <script type="text/javascript">
  192.         var nav = document.getElementById('page-nav');
  193.         var navlist = document.getElementById('page-nav-list');
  194.         nav.insertAdjacentHTML('afterBegin','<button id = "menutoggle">Metu</button>')
  195.         var menutoggle = document.getElementById('menutoggle');
  196.         menutoggle.onclick = function() {
  197. //navlist.style.display只能判断将dispaly直接写于标签的情况，如<ul style="display :none">
  198. //而后者可以对该元素的所有的css样式进行计算之后加以判断，匹配所有none的情况	
  199. 	        if(window.getComputedStyle(navlist).display === "none"){
  200. 		        menutoggle.className = "active";
  201. 	        }else{
  202. 		        menutoggle.className = "";
  203.         }
  204.     }
  205.     </script>
  206. </body>
  207. </html>





声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/335225
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号