最近才接触到响应式布局的概念，之前用到的bootstrap就是一种响应式布局的框架。学习的时候参考了http://blog.csdn.net/shoyer/article/details/8293011这篇文章。
简单记录一下用css写响应式布局的方法。大概可以这么理解，通过判断屏幕的大小来调整css的样式从而达到适应不同屏幕的目的。
首先先贴一个html，css都放在同级的css文件夹下面，因为有个简单的轮播，所以要引入jquery
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="./css/initstyle.css"> <link rel="stylesheet" type="text/css" href="./css/media-requeries.css"> <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script> </head> <body> <div id="pagewhole"> <header> <h1>my website</h1> <div id="banner"> <ul id="banner_img"> <li><img src="./img/1.jpg"/></li> <li><img src="./img/2.jpg"/></li> <li><img src="./img/3.jpg"/></li> <li><img src="./img/4.jpg"/></li> </ul> </div> <nav> <ul id="main-nav"> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> </ul> <form style="float:right;"> <input type="text" name="search" /> <input type="button" name="submit" value="search" /> </form> </nav> <div id="clear" style="clear:both;"></div> </header> <div id="content"> <article> blog post </article> </div> <aside id="sidebar"> <section class="widget"> widget </section> </aside> <footer id="footer"> foot </footer> </div> </body> <script type="text/javascript"> var time = ""; var index = 2; setInterval(showimg,3000); function showimg() { //$(".imgnum span").removeClass("onselect").eq(index-1).addClass("onselect"); var curli = $("#banner_img li") ; curli.fadeOut("slow") ; curli.eq(index-1).fadeIn("slow"); index = index + 1 > 4 ? 1 : index + 1; // time = setTimeout("showimg(" + index + ")", 3000); } </script> </html>
注意两个外部css引入的先后顺序很重要，如果弄反了会导致css冲突
然后上我随便写的css样式：
*{ padding: 0px ; margin: 0px ; } header{ margin-top: 20px ; margin-bottom: 20px ; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } #pagewhole{ margin: 0 auto ; max-width: 960px ; } #banner{ overflow: hidden; height: 200px; border-radius: 10px; } #content { width: 600px; height: 600px ; float: left; border:3px solid #B6B6B6 ; } #sidebar { width: 280px; height: 300px ; float: right; border:3px solid #B6B6B6 ; } #footer { clear: both; height: 20px ; } #main-nav li{ float: left; list-style-type:none; display: block; width: 50px; } #banner li{ float: left; }
media-queries.css
@media screen and (max- 960px){ #pagewhole{ width: 95% ; } #content{ width: 60% ; padding: 3% 4% ; } #sidebar{ width: 30% ; } } @media screen and (max- 650px){ header{ height: auto ; } #content{ width: auto; float: none; margin: 20px 0 ; } #sidebar{ width: 100% ; float: none; margin: 0 ; } } @media screen and (max- 480px) { html { -webkit-text-size-adjust: none; } #main-nav a { font-size: 90%; padding: 10px 8px; } }
这个css是关键，就是靠他来判断浏览器的宽度变换的，你问我为啥选那几个宽度？960px是因为一般网页内容都是960px，480px是因为iphone的宽度是480px，中间的那个不懂。。
这是一些响应式可能需要的meta
响应式网站得记住几点（我的师傅说哒）
如果不是100%宽度的网站 定义父框架的 div 必须要带max-width 跟 width
所有的网页图片 要切成2倍大小，即如果psd里100*100的图片 要切成200*200的
在手机端 就算是 你写了 display:none dom元素中的css 手机还是会加载如果css 里 你设置了 一张大的背景图片 手机还是会加载这张图片这时候就需要jq removed() 来移除 div
如果不是100%宽度的网站 定义父框架的 div 必须要带max-width 跟 width
所有的网页图片 要切成2倍大小，即如果psd里100*100的图片 要切成200*200的
在手机端 就算是 你写了 display:none dom元素中的css 手机还是会加载如果css 里 你设置了 一张大的背景图片 手机还是会加载这张图片这时候就需要jq removed() 来移除 div