移動端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);