移动端web

未经赞成请勿转载：

第一步：建css文件和less文件，将两个经过kaola绑定。
第二步：在less文件里面设变量@r: 100rem;

注：less用于计算px到rem。

lg：less 文件中写入margin:100/@r;  

        css文件中将自动更新为rem。
第三步：将rem.js引入。
第四步：html文件加：<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">

下面为rem.js代码：

!function (window) {
	/* 设计图文档宽度 */
	var docWidth = 750;
	var doc = window.document,
	    docEl = doc.documentElement,
	    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
	var recalc = (function refreshRem () {
	    var clientWidth = docEl.getBoundingClientRect().width;
	    /* 8.55：小于320px再也不缩小，11.2：大于420px再也不放大 */
	    docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 + 'px';
	    return refreshRem;
	})();
	/* 添加倍屏标识，安卓为1 */
	docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1);
	if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
    /* 添加IOS标识 */
    doc.documentElement.classList.add('ios');
    /* IOS8以上给html添加hairline样式，以便特殊处理 */
    if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8) {
    	doc.documentElement.classList.add('hairline');
    }    
	}
	if (!doc.addEventListener) return;
	window.addEventListener(resizeEvt, recalc, false);
	doc.addEventListener('DOMContentLoaded', recalc, false);
}(window);