闲来无聊研究研究响应式,对html5、响应式一知半解的。
废话少说,直接上代码
1、添加meta标识:大多数移动浏览器将HTML页面放大为宽的视图(viewport)以符合屏幕分辨率。禁止缩放,使用设备屏幕宽度
不论 ios、Anroid 还是云OS,最重要的都是 viewport 的设置
width=device-width 宽度等于设备宽度,出事比例为1,禁止用户缩放。
ios 下通过 apple-mobile-web-app-capable 开始桌面全屏模式
2、为蛋疼的IE添加html5支持
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}