标识响应式html,第一个html5+响应式页面

闲来无聊研究研究响应式，对html5、响应式一知半解的。

废话少说，直接上代码

1、添加meta标识：大多数移动浏览器将HTML页面放大为宽的视图(viewport)以符合屏幕分辨率。禁止缩放，使用设备屏幕宽度

不论 ios、Anroid 还是云OS，最重要的都是 viewport 的设置

width=device-width 宽度等于设备宽度，出事比例为1，禁止用户缩放。

ios 下通过 apple-mobile-web-app-capable 开始桌面全屏模式

2、为蛋疼的IE添加html5支持

3、添加响应式核心css3-media-queries (http://webdesignerwall.com/tutorials/css3-media-queries)

4、构建html 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}