响应式布局实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>index</title> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="false" id="twcClient" name="twcClient"> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style type="text/css"> body{margin:0;padding:10px;text-align: center} header{width: 100%;border: 1px solid #789; background: #abcabc;color:#bcebce} section{position:relative;padding:0 190px 0 160px;margin: 10px auto} section div{height:1280px;background: #f1f1f1} section ul li a{width: 50px;height: 50px; display: block; float: left;margin:6px 6px 0 0} aside{margin:10px auto 30px;width:150px;height:350px;position: relative;float:left;z-index: 99;background: #a3a6a9} nav{width:180px;position:fixed;right:10px;z-index:99;margin:10px auto 30px;text-align:left;background: #a9b5c2;border-radius:8px 8px 0 0;} nav:after{ content: ""; position: absolute; border-top: 20px solid #a9b5c2; border-right: 90px dashed transparent; border-left: 90px dashed transparent; left: 0px; } nav ul, section ul{margin:0;padding:0} nav ul li, section ul li{margin:0;padding:0;list-style: none} footer{width:99%;height:50px;clear:both;border: 1px solid #753;background: #789;bottom: 0} /* @media (min-width:800px) and (max-width:1200px) { ... } */ @media all and (max-width:500px) { aside,section,nav{float:none;position:static;width: 99%;margin-bottom:10px;border-radius: 0} section{padding:0} nav:after{border:none} } @media all and (max-width:800px) { aside,section,nav{float:none;position:static;width: 99%;margin-bottom:10px;border-radius: 0} section{padding:0} nav:after{border:none} } </style> </head> <body> <header><h1>title</h1></header> <!-- nav --> <nav> <ul> <li><a href="" title="">list1</a></li> <li><a href="" title="">list2</a></li> <li><a href="" title="">list3</a></li> <li><a href="" title="">list4</a></li> <li><a href="" title="">list5</a></li> </ul> </nav> <!-- aside --> <aside> </aside> <section> <div> <ul> <li><a href="" title=""><span>ok</span></a></li> <li><a href="" title=""><span>ok</span></a></li> <li><a href="" title=""><span>ok</span></a></li> <li><a href="" title=""><span>ok</span></a></li> <li><a href="" title=""><span>ok</span></a></li> <li><a href="" title=""><span>ok</span></a></li> <li><a href="" title=""><span>ok</span></a></li> <li><a href="" title=""><span>ok</span></a></li> <li><a href="" title=""><span>ok</span></a></li> <li><a href="" title=""><span>ok</span></a></li> </ul> </div> </section> <footer>About Us</footer> </body> </html>
主要用到的知识点：css媒体查询，另外设置正确的meta属性也很重要
