Viewport
// meta:
// <meta content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" name="viewport">
(function(init_width){
var isAndroid=navigator.userAgent.match(/(Android)/i)
, viewPort = document.querySelector("meta[name=viewport]");
window.html_font_size = isAndroid?100:window.innerWidth*100/init_width;
function setHtmlWidth(){
document.querySelector("html").style.fontSize = html_font_size + "px";
}
if (isAndroid) {
content = "target-densitydpi=320,width="+init_width+",user-scalable=no";
viewPort.setAttribute("content",content);
}else{
setHtmlWidth();window.onresize = setHtmlWidth;
}
})(640)
CSS reset
/*css reset*/
html{font-size:100px}
body{
font-size: 0.12rem;
font-family: "微软雅黑","宋体","arial";
font-weight: normal;
overflow-x: hidden;
}
body, ul, ol, p, h1, h2, h3, h4, h5, h6, dl, dt, dd ,form ,textarea ,input{margin:0;}
ul,ol{list-style:none;}
ul,ol,input{padding:0;}
table{margin:0 auto;width:100%;border-collapse:collapse;}
a img{border:0;
}
input[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: none;
}
.clearfix:after {
content: " ";
display: block;
clear: both;
height: 0;
}
img{width:100%;}
.max_width{
width:6.4rem;
margin:0 auto;
position: relative;
}
.clear{
width:100%;
height:0;
clear:both;
}
.clear30{
height: 30px;
}
.clearfix {
zoom: 1;
}
img,object,audio,vedio{
max-width: 100%;
}
a{
text-decoration: none;
}
html
<div class="wrap clearfix">
<div class="max_width">
</div>
</div>