移动端常用布局方法
目前，主流高性能移动端网页页面布局方案有两种（基于宽度320px，按设计图实现方式）
1、通过设置viewport缩放来实现
2、通过rem相对单位来实现
viewport,rem基础知识，可参见：
大致说一下实现思路：
1、通过viewport进行移动端适配：
(1) 按照宽度320px实现基本网页布局及样式
(2) 动态设置viewport属性，做适当缩放
eg:通过window.screen.width获取屏幕宽度，如果当前设备屏幕宽度为320px,则缩放比例为320/320=1，
动态设置viewport content initial-scale=1.0,如果屏幕宽度为375，则缩放比例为375/320=1.2
(function(){
var vt=document.getElementById("viewport");
vt.getAttribute("content");
var scale=window.screen.width/320;
vt.setAttribute("content","width=320,initial-scale="+scale+",user-
scalable=no");
})()
在chrome进行调试的时候会出现纵向滚动条异位的现象，但在真机测试中不存在这种问题，暂时可以忽略。
下面是一个完整的通过缩放实现的布局demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" id="viewport" content="">
<title>移动端基于320px缩放适配</title>
</head>
<script>
(function(){
var vt=document.getElementById("viewport");
vt.getAttribute("content");
var scale=window.screen.width/320;
vt.setAttribute("content","width=320,initial-scale="+scale+",user-scalable=no");
})()
</script>
<style>
html,body{padding: 0px;margin: 0px;}
body{
width:320px;
}
.header{width:320px;background-color: #94ffa5;height:40px;}
.content{width:320px;overflow:hidden}
.content div{padding-top:20px;padding-bottom:20px;text-align:center;width:160px;float: left}
.footer{width:320px;background-color: rosybrown;height:40px;}
</style>
<body>
<div class="header"></div>
<div class="content">
<div>
<p>content1</p>
<p>content1</p>
<p>content1</p>
<p>content1</p>
<p>content1</p>
</div>
<div>
<p>content2</p>
<p>content2</p>
<p>content2</p>
<p>content2</p>
<p>content2</p>
</div>
</div>
<div class="footer"></div>
</body>
</html>
2、通过rem相对单位实现移动端适配
大概的思路就是在html根节点定义font-size的值，及设置1rem的宽度，这个宽度也是基于320px基础进行缩放的，如果设备宽度是320px时,设置1rem=10px,对于body 32rem=32 10=320px;那么当屏幕宽度为375px是，则1rem=12px,body宽度就相应为32rem=32 12=375px。根节点单位可以通过js来进行初始化
(function(){
var screenwidth=window.screen.width;
rootrem=screenwidth/320*10;
document.getElementsByTagName("html")[0].style.fontSize=rootrem+"px";
})()
也可以通过媒体查询进行设置,不过媒体查询在设定阈值时可能不大好做。
下面是一个完整的通过rem来实现的布局DEMO
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<title>rem实现移动端适配,基于320px设计</title>
</head>
<script>
// 在不同终端root 1rem,也可以用媒体查询来做
(function(){
var screenwidth=window.screen.width;
rootrem=screenwidth/320*10;
document.getElementsByTagName("html")[0].style.fontSize=rootrem+"px";
})()
</script>
<style>
html,body{padding:0px;margin:0px;}
/*设置body宽度为屏幕宽度,并重新设置字体大小*/
body{width:32rem;font-size:14px;}
.header{width:32rem;height:40px;background-color: #94ffa5}
.content{overflow:hidden;width:30rem;margin: auto;text-align: center;background-color: antiquewhite}
.content > div{width: 50%;float: left}
.footer{width: 32rem;height:40px;background-color:royalblue}
</style>
<body>
<div class="header"></div>
<div class="content">
<div>
<p>content1</p>
<p>content1</p>
<p>content1</p>
<p>content1</p>
<p>content1</p>
</div>
<div>
<p>content2</p>
<p>content2</p>
<p>content2</p>
<p>content2</p>
<p>content2</p>
</div>
</div>
<div class="footer"></div>
</body>
</html>
chrome调试过程中会出现一个问题，因为chrome浏览器设置了最小font-size=12px,当设置小于12px时不起作用，可以选择其他的调试工具代替，如firforx User Agent Switcher 。
