先上代码，后解释。。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
js代码（自觉带上jQuery）
<script type="text/javascript">
(function () {
$("html,body").css("font-size", ($('html').width() / 750 * 100) + "px");
})()
</script>
先简单解释一下dpr适配吧
一个屏幕的DPR是根据屏幕的物理像素除以屏幕的设备独立像素（也叫密度无关像素）得来的（DPR = 物理像素 / 设备独立像素）。iphone6宽度的设备独立像素是375，宽度的物理像素是750，那么就意味着DPR是2。
flexible.js对dpr有一个很好的适配，不同手机型号的屏幕分辨率都有对应的dpr、html的font-size初始值以及meta的适配。小编在做项目的时候也是用的flexible.js，同样也出现了很多的问题。
1. 与UI设计图的数值换算很麻烦。
解：现在大部分的UI设计图宽都是750像素，flexible.js中html的font-size初始值可不是按照设计图宽750像素来的，换算其他太麻烦，难道要放个计算机在旁边算吗？完全降低了开发效率。
2. meta标签与接入第三方聊天工具不匹配。
解：flexible.js中对meta的初始值也是换算而来，不像我们上面写meta标签那种比例而来，我们做的项目需要接入客服聊天，有一些第三方的聊天工具完全不适配，在手机上，聊天界面特别小，去掉flexible.js，整个项目都要改，不去掉的话，第三方的聊天工具也是要改。
接下来说说上面我说的方法吧。
1.meta标签 content属性值 :
width:可视区域的宽度，值可为数字或关键词device-width
intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no 禁止缩放
2.
重点在这里↓↓↓↓↓：
比如说：设计图中一个input宽600px，在css中设置input宽按照设计图是值除以100就可以，这个input的宽就是6rem;高是80px，css设置height:0.8rem即可，是不是很方便呢。。
如果有什么问题，解决不了的，可以联系小编哟~~
