首页 > 代码库 > 响应式布局

响应式布局

2024-08-27 11:28:21   238人阅读

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 6         <title>响应式布局</title>
 7         <style type="text/css">
 8             div {
 9                 background: #ccc;
10                 width: 100%;
11                 height: 400px;
12                 border: 2px solid #4183C4;
13             }
14             span {
15                 display: block;
16                 float: left;
17                 background: #007902;
18                 color: #fff;
19                 line-height: 25px;
20                 padding: 10px;
21                 -moz-box-sizing: border-box;
22                 -webkit-box-sizing: border-box;
23                 box-sizing: border-box;
24                 border: 2px solid #fff;
25             }
26             @media screen and (max-width: 400px) {
27                 span {
28                     width: 100%;
29                 }
30             }
31             @media screen and (min-width: 400px) and (max-width: 800px) {
32                 span {
33                     width: 50%;
34                 }
35             }
36             @media screen and (min-width: 800px) {
37                 span {
38                     width: 25%;
39                 }
40             }
41         </style>
42         <script type="text/javascript">
43             window.onload = function() {
44 
45                 var divCon = document.createElement(‘div‘);
46                 var span;
47                 for (var i = 0; i < 5; i++) {
48                     span = document.createElement(‘span‘);
49                     span.innerHTML = "内容块-" + i;
50                     divCon.appendChild(span);
51                 }
52                 document.body.appendChild(divCon);
53                 //alert(divCon.offsetWidth);
54             }
55         </script>
56     </head>
57     <body>
58         <h3>如果大于屏幕宽度小于400px就一列显示,400px-800px两列显示，800像素以上四列显示</h3>
59     </body>
60 </html>

 

响应式布局


联系
我们