下面介绍两种方法：
1.淘宝移动端：
取 1/10 的屏宽 为1rem。然后全部转成rem为单位来布局。引入这个js就行。
由于本文是用markdown书写的，暂时不能添加附件，所以这个js大家只能通过的百度云盘下载了。
地址：http://pan.baidu.com/s/1slwJGip
密码：fojv
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;}
.wrap{
width: 5rem;
height: 10rem;
background: rgba(0,0,0,.1);
}
</style>
<script type="text/javascript" src="flexible.js"></script>
</head>
<body>
<div class="wrap"></div>
</body>
</html>
用这个方法的话，要装一个插件，方便把px自动转化成rem。插件安装方法 http://www.jianshu.com/p/8eeee0639592
2.我之前用过的一种方法。原理：以640px设计图为模板，把一屏幕宽当成6.4rem 。量出来的px和rem转换比例是100:1。(强行设置dpr都为1)。引入如下js：
地址：http://pan.baidu.com/s/1jHCqIAM
密码：wcd3
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">
<style type="text/css">
*{margin:0;padding:0;}
.wrap{
width:3.2rem;
height:6.4rem;
background: rgba(0,0,0,0.1);
}
</style>
<script type="text/javascript" src="init.js"></script>
</head>
<body>
<div class="wrap"></div>
</body>
</html>
