JS/CSS 响应式样式实例 

 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-width: 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-width: 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()">&#9776;</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>

 

posted @ 2019-01-12 15:11  给自己一个梦  阅读(607)  评论(0)    收藏  举报