1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>js响应式实例</title> 6 <style> 7 body {margin:0;} 8 9 .nav { 10 overflow: hidden; 11 background-color: #333; 12 } 13 14 .nav a { 15 float: left; 16 display: block; 17 color: #f2f2f2; 18 text-align: center; 19 padding: 14px 16px; 20 text-decoration: none; 21 font-size: 17px; 22 } 23 24 .nav a:hover { 25 background-color: #ddd; 26 color: black; 27 } 28 29 .nav .icon { 30 display: none; 31 } 32 /*开始媒体查询，当屏幕小鱼750px;切换样式*/ 33 @media screen and (max- 750px) { 34 .nav a:not(:first-child) {display: none;}/*主页选出来*/ 35 .nav a.icon { 36 float: right; 37 display: block; 38 } 39 } 40 41 @media screen and (max- 750px) { 42 .nav.res {position: relative;} 43 .nav.res .icon { 44 position: absolute; 45 right: 0; 46 top: 0; 47 } 48 .nav.res a { 49 float: none; 50 display: block; 51 text-align: left; 52 } 53 54 } 55 </style> 56 </head> 57 <body> 58 <nav class="nav" id="mynav"> 59 <a href="#">主页</a> 60 <a href="#">CSS</a> 61 <a href="#">HTML</a> 62 <a href="#">JavaScript</a> 63 <a href="#">node.js</a> 64 <a href="#">vue</a> 65 <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="show()">☰</a> 66 </nav> 67 <div> 68 <h1> 69 响应式主要用到的是媒体查询@media screen 70 </h1> 71 </div> 72 </body> 73 <script> 74 function show() { 75 var x = document.getElementById("mynav"); 76 if (x.className === "nav") { 77 x.className += " res"; 78 } else { 79 x.className = "nav"; 80 } 81 } 82 </script> 83 </html>