第一个html5+响应式页面
闲来无聊研究研究响应式，对html5、响应式一知半解的。
废话少说，直接上代码
1、添加meta标识：大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。禁止缩放，使用设备屏幕宽度
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge">
不论 ios、Anroid 还是云OS，最重要的都是 viewport 的设置
width=device-width 宽度等于设备宽度，出事比例为1，禁止用户缩放。
ios 下通过
apple-mobile-web-app-capable开始桌面全屏模式
2、为蛋疼的IE添加html5支持
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
3、添加响应式核心css3-media-queries （http://webdesignerwall.com/tutorials/css3-media-queries）
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
4、构建html body
<body class="body"> <header class="header"> </header> <section class="section clearfix"> <section class="section-1"> </section> <aside class="aside"> </aside> </section> <footer class="footer"> </footer> </body>
5、添加样式及响应式样式
/*html5标签初始化*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/*pc端默认样式*/
.body{ width: 1002px;margin: 0 auto;}
.header{ width: 1000px; height: 30px; margin-bottom: 10px; border: 1px solid #eee;}
.section{width: 1002px;}
.section-1{ width: 70%; height: 500px; border: 1px solid #eee; float: left;}
.aside{ width: 290px; height: 200px; border: 1px solid #eee; float: right;}
.footer{ width: 1000px; height: 30px; margin-top: 10px; border: 1px solid #eee;}
/*设备分辨率小于1002px下样式*/
@media screen and (max-width: 1002px){
.body{ width: 100%;margin: 0 auto;}
.header{ width: 99.7%; background: #ccc;}
.section{width: 100%;}
.section-1{width:99.7%}
.section-1 img{ max-width: 110px;}
.aside{ display: none;}
.footer{ width: 99.7%;}
}
/*设备分辨率小于800px下样式*/
@media screen and (max-width: 800px){
.body{ width: 100%;margin: 0 auto;}
.header{ width: 99.7%; background: #efefef;}
.section{width: 100%;}
.section-1{width:99.7%}
.aside{ display: none;}
.footer{ width: 99.7%;}
}
/*清除浮动*/
.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both}
.clearfix{zoom:1}