移動端開發模板
1.使用less，藉助於koala工具
//基本設定（畫素比、Html字型大小）
(function (doc, win) {
var set={
setRem:function (ImgW,ImgM){//設定字型大小(預設20px,640的2倍圖)
ImgM=ImgM || 2;
ImgW=(ImgW || 640)/ImgM;
var setHtmlSize=function (){
var oHtml = doc.getElementsByTagName('html')[0];
oHtml.style.fontSize =20*oHtml.clientWidth / ImgW +"px";
};
var resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize';
if( !doc.addEventListener) return;
win.addEventListener(resizeEvt, setHtmlSize, false);
doc.addEventListener('DOMContentLoaded',setHtmlSize, false);
}
}
set.setRem(750,2);//設定字型大小,如果是640設計稿，則修改為 set.setRem640,2);
})(document, window);
----------------------------------
引用js/rem.js，配置好了，2倍數圖
less資料夾裡面設定 @rem:40rem;
當測量PSD裡面的width height時候，直接是說多少，就除以@rem
開啟考拉koala，引入這些資料夾
比如測量是100px 200px 寬高。則這樣寫 width:100/@rem height:100/@rem即可
-----------------------
參考連結：https://files.cnblogs.com/files/leshao/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BC%80%E5%8F%91rem%E6%A8%A1%E6%9D%BF.rar
==================
2.不使用less,直接css 編碼，按照100比例計算
function Rem() {
var docEl = document.documentElement,
oSize = docEl.clientWidth / 6.4; //如果是750設計稿，則/7.5
if (oSize > 100) {
oSize = 100; // 限制rem值 640 / 6.4 =100
}
docEl.style.fontSize = oSize + 'px';
}
window.addEventListener('resize', Rem, false);
Rem();
----------------------------
此demo是rem為單位佈局開發。
base裡面也不需要設定font-size:12px了
拿到的設計稿，直接按照標準的實際大小單位除以100即可。
比如:PSD裡面標題是28px標註，則在css這樣寫0.28rem即可
預設的是基於640px的設計稿，如果是750設計稿則需要修改rem.js裡面的檔案引數
oSize = docEl.clientWidth / 6.4;
oSize = docEl.clientWidth / 7.5;
-------------
如果rem.js裡面是/6.4，則測試的時候，找個320模擬器模擬即可
參考下載連結：https://files.cnblogs.com/files/leshao/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BC%80%E5%8F%91rem-100%E6%AF%94%E4%BE%8B%E6%A8%A1%E6%9D%BF.rar