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