1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Document</title>
9 <style>
10 body,
11 html {
12 width: 100%;
13 height: 100%;
14 background-color: dimgrey;
15 margin: 0;
16 }
17
18 * {
19 box-sizing: border-box;
20 }
21
22 .container {
23 display: flex;
24 width: 100%;
25 height: 100%;
26 }
27
28 .left {
29 transition: all 0.2s;
30 overflow: hidden;
31 flex-basis: 0;
32 }
33
34 .active {
35 flex-basis: 20vw;
36 }
37
38 @media screen and (max-width:414px) {
39 .active {
40 flex-basis: 40vw;
41 }
42
43 }
44
45 .right {
46 flex: 1;
47 height: 100%;
48 background: linear-gradient(to left, rgb(180, 180, 180), rgba(255, 2, 255, .8));
49 }
50 </style>
51 </head>
52
53 <body>
54 <div class="container">
55 <div class="left" id="left">
56 <button id="hidden">隐藏</button>
57 </div>
58 <div class="right">
59 <div><button id="active">激活</button></div>
60 <div>
61 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed provident alias debitis quia similique.
62 Aut pariatur asperiores dolorum! Repudiandae dolores deserunt amet rem velit cum deleniti voluptates
63 nesciunt sint facere.
64 </div>
65 </div>
66 </div>
67 <script>
68 function toggle() {
69 left.classList.toggle("active");
70 }
71 function on(node, type, foo) {
72 node.addEventListener(type, foo, false);
73 }
74 on(active, "click", toggle);
75 on(hidden, "click", toggle);
76 </script>
77 </body>
78
79 </html>