响应式布局
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了响应式布局相关的知识，希望对你有一定的参考价值。
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>
以上是关于响应式布局的主要内容，如果未能解决你的问题，请参考以下文章