px-rem自适应转换(进阶@rem:40rem; )

接力之前的文章

https://www.cnblogs.com/leshao/p/5674710.html

这篇文章讲解的是px -rem 单位换算除100的写法

比如实际测量PSD宽度是500px,则心算 500/100=5 。写 5rem

经过后续项目的改版，不同设计师，不同的风格，不同的单位大小。往往需要我们重新修改项目里面的单位大小，比如字体大小，宽度，高度等

现在经过改良实现了这样一种方法

配置一段rem.js，在所需的页面引入即可

=================================================================

//基本设置（像素比、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);//设置字体大小
　　})(document, window);

==================================================================

引用js/rem.js，配置好了，2倍数图，这个时候，我们需要打开考拉，引入less

less文件夹里面设置 @rem:40rem;

当测量PSD里面的width height时候，直接是说多少，就除以@rem

打开考拉"koala"，引入这些文件夹

比如测量是100px 200px 宽高。则这样写 width:100/@rem height:100/@rem即可

==========================

总结一句话，配置好rem.js之后，页面引用，使用考拉，style.less里面写好@rem:40rem;

接下来直接 x/@rem

这样做的好处是，当某天项目改版，更换宽高，则我们，可以直接修改 @rem:40rem.这个比例，即可整体替换生效

=========================================

参考下载链接地址：https://files.cnblogs.com/files/leshao/%E7%A7%BB%E5%8A%A8%E7%AB%AFrem.rar

demo实例：https://files.cnblogs.com/files/leshao/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BC%80%E5%8F%91rem.rar

巴特西

px-rem自适应转换(进阶@rem:40rem; )

最新文章

热门文章