移动端开发模板

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 宽高。则这样写 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