响应式布局
响应式布局在面对不同分辨率设备灵活性强，在平时的网页设计中基本上都要用到响应式布局设计，它给我们提供了良好的用户浏览页面，能带给我们更好的客户体验，下面给大家分享下我做的一个简单的响应式的布局：
不同的页面会适用不同大小浏览器页面，它会随着分辨率的变化而变化。代码展示如下：
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"/> <title></title> <style> p{ font-size:12px; } header{ width:100%; } headerimg{ width:100%; } @media(min-width:1300px)and(max-width:1400px){ #left{ float:left; width:30%; margin:0px50px; } #left#logo-bg{ margin:10%10%; width:80%; position:relative; } #left#logo{ float:left; width:12%; position:absolute; left:13%; top:230px; } #leftp{ margin-bottom:-20px; } #leftp,h4{ text-align:center; color:red; } #right{ float:left; width:60%; margin:15%0px; } #righth2{ text-align:center; } #rightfieldset{ text-align:center; border-left:none; border-right:none; border-bottom:none; } #rightfieldsetlegend{ padding:0px20px; } #fen{ width:100%; -webkit-column-count:6; -moz-column-count:6; -o-column-count:6; -ms-column-count:6; column-count:6; -webkit-column-gap:1em; -moz-column-gap:1em; -o-column-gap:1em; -ms-column-gap:1em; column-gap:1em; } #fenimg{ width:100%; border-radius:10px10px10px10px; } #fenp,h4{ text-align:center; color:red; } #fenp{ margin-bottom:-20px; } #dip{ text-align:center; } #dipspan{ color:red; } } @media(min-width:1000px)and(max-width:1300px){ #left{ float:left; width:30%; margin:0px50px; } #left#logo-bg{ margin:10%10%; width:80%; position:relative; } #left#logo{ width:12%; position:absolute; left:14%; top:190px; } #leftp{ margin-bottom:-20px; } #leftp,h4{ text-align:center; color:red; } #right{ float:left; width:60%; margin:15%0px; } #righth2{ text-align:center; } #rightfieldset{ text-align:center; border-left:none; border-right:none; border-bottom:none; } #rightfieldsetlegend{ padding:0px20px; } #fen{ width:100%; -webkit-column-count:3; -moz-column-count:3; -o-column-count:3; -ms-column-count:3; column-count:3; -webkit-column-gap:1em; -moz-column-gap:1em; -o-column-gap:1em; -ms-column-gap:1em; column-gap:1em; } #fenimg{ width:100%; border-radius:10px10px10px10px; } #fenp,h4{ text-align:center; color:red; } #fenp{ margin-bottom:-20px; } #dip{ text-align:center; } #dipspan{ color:red; } } </style> </head> <body> <header> <imgsrc="img/rag.png"/> </header> <asideid="left"> <imgsrc="img/logo-bg.png"id="logo-bg"/> <imgsrc="img/logo.png"id="logo"/> <hr/> <p>THE</p> <h4>WEBLOCUE</h4> <hr/> <p>THE</p> <h4>WEBLOCUE</h4> <hr/> <p>THE</p> <h4>WEBLOCUE</h4> <hr/> </aside> <articleid="right"> <h2>“Givemeproblems,givemework.”</h2> <p>Intheyear1878ItookdogreeofDoctorofMediclineoftheUnibertiveoftheLondonandproblemstoNetbodytogothroughthecourse,Intheyear1878ItookdogreeofDoctorofMediclineoftheUnibertiveoftheLondonandproblemstoNetbodytogothroughthecourse,Intheyear1878ItookdogreeofDoctorofMediclineoftheUnibertiveoftheLondonandproblemstoNetbodytogothroughthecourse.</p> <p>Intheyear1878ItookdogreeofDoctorofMediclineoftheUnibertiveoftheLondonandproblemstoNetbodytogothroughthecourse,Intheyear1878ItookdogreeofDoctorofMediclineoftheUnibertiveoftheLondonandproblemstoNetbodytogothroughthecourse,Intheyear1878ItookdogreeofDoctorofMediclineoftheUnibertiveoftheLondonandproblemstoNetbodytogothroughthecourse.</p> <fieldset><legend>victors</legend></fieldset> <divid="fen"> <imgsrc="img/1.jpg"/> <p>SETCOME</p> <h4>HOLEMES</h4> <imgsrc="img/2.jpg"/> <p>SETCOME</p> <h4>HOLEMES</h4> <imgsrc="img/3.jpg"/> <p>SETCOME</p> <h4>HOLEMES</h4> <imgsrc="img/4.jpg"/> <p>SETCOME</p> <h4>HOLEMES</h4> <imgsrc="img/5.jpg"/> <p>SETCOME</p> <h4>HOLEMES</h4> <imgsrc="img/6.jpg"/> <p>SETCOME</p> <h4>HOLEMES</h4> </div> <fieldset><legend>*</legend></fieldset> <divid="di"> <p>Intheyear1878Itook<span>Suingtable</span>dogreeofDoctor</p> <p>Whattheyear2016Itookdogree<span>Ruingroid</span>ofDoctor</p> </div> </article> </body> </html>
做的不够严谨，因为时间问题，请见谅。
以上这篇响应式布局的简单案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持查字典教程网。
原文地址：http://www.cnblogs.com/duzheqiang/p/5666465.html