东哥说：不用rem了，把meta改成这样
<meta name="viewport" content="width=720, user-scalable=no, target-densitydpi=device-dpi">就可以直接上px...
这句target-densitydpi=device-dpi是什么意思呢？
target-densitydpi这个私有属性，它表示目标设备的密度等级，作用是决定css中的1px代表多少物理像素
target-densitydpi值可以为一个数值或 high-dpi、medium-dpi、low-dpi、 device-dpi这几个字符串中的一个
当target-densitydpi=device-dpi时， css中的1px会等于物理像素中的1px。
好像已经决定要废弃target-densitydpi这个属性了，尽量避免使用这个属性。
当你不在项目中用一些UI插件的时候，它显示的没问题，的确没有使用rem的必要。
大部分手机端UI插件都是根据手机屏幕来展示它的大小，这时候，坑就出现了。
iphone6屏幕大小是375*667，当使用了target-densitydpi=device-dpi,而width=720时，也就是说当UI插件自认为是用了满宽度(375)，实际上显示的是屏幕的（375/720）≈ 52%。
笔者当时的解决方案是，把px转回rem，但是那么多的css，每个px都手动转，想想头都大。
然后，第一时间，想到用正则表达式啊。
直接上代码
var pxCode = ""; // 一堆px单位的css代码
var remCode = cssCode.replace(/([0-9]*?\.)?[0-9]+px/g,function(res){
return (res.split(‘px‘)[0]/100) + ‘rem‘
}); // 一堆rem单位的css代码<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{ margin: 0; padding: 0; }
html,body{ width: 100%; height: 100%; }
.left{ float: left; }
.right{ float: right; }
.item{ width: 48%; height: 90%; border: none; position: relative; top: 5%; left: 0; }
.item textarea{ width: 100%; height: 100%; outline: none; resize: none; }
</style>
<body>
<div class="item left">
<textarea id="px"></textarea>
</div>
<div class="item right">
<textarea id="rem"></textarea>
</div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(‘#px‘).keyup(function() {
var px = $(this).val();
var rem = px.replace(/([0-9]*?\.)?[0-9]+px/g,function(res){
return (res.split(‘px‘)[0]/100)+‘rem‘
})
$(‘#rem‘).val(rem);
})
</script>
</html>target-densitydpi=device-dpi会使其他ui插件布局变小
原文：http://www.cnblogs.com/jarjune/p/7912701.html