移动端自适应方案 一

1.首先设置html或者body字体大小，设置好后，内部元素的1rem值会被这个值改变。

2. font-size="设备宽度/设计稿宽度" 将这个值作为1rem的px个数，像素不能太小，就x100.

3. 那么设计稿中元素为25px值时候，在设备上就是25rem,然后在除以100，就是0.25rem；

<script>
	(function (doc, win) {
		var docEl = doc.documentElement || doc.body,
			resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
			recalc = function () {
				var clientWidth = docEl.clientWidth;
				if (!clientWidth) return;
				docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
			}
		if (!doc.addEventListener) return;
		win.addEventListener(resizeEvt, recalc, false);
		doc.addEventListener('DOMContentLoaded', recalc, false);
	})(document, window);
</script>

2.淘宝rem适配方案 开源

页面首先引入

a:<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>

b:下载flexible.js 等文件到项目指定目录下，然后在head中引入。建议对于js做内联处理，在所有资源加载之前执行这个js。

原理：

动态计算html的font-size =设计图的总宽度除以10，就是基准值

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

如果设计师给的图纸是750的，font-size=75px;页面元素的大小是100px，你就应该在css设置为100/75=1.33rem;

如果设计师给的图纸是375的，font-size=37.5px;页面元素的大小是100px，你就应该在css设置为100/37.5=2.67rem;

注意：

字体不使用rem的方法

可以通过媒体查询的方式或者[data-dpr]属性来区分不同dpr下的文本字号大小

div {
    width: 1rem;
    height: 0.4rem;
    font-size: 12px; // 默认写上dpr为1的fontSize
}
[data-dpr="2"] div {
    font-size: 24px;
}
[data-dpr="3"] div {
    font-size: 36px;