关于rem适配

目前主流的移动端适配用rem的偏多，接下来说一说关于rem的适配问题吧。。。

需要的功能：设计图用于不同的设备，效果等比例缩放。

rem是一个新的单位，该单位与HTML页面的fontSize有关，1px=?rem,是通过html的font-size进行决定的，font-size为多少，那么1rem就为多少px;（在我们的项目中1rem=100px）rem 是相对于根标签的。

一般的设计稿为750px,也就是我们常说的2倍图，但是手机适口的宽度一般为375px，归纳一下手机适口的范围:

iphone4 320、360、iphon6 375、384、400、480、533、568、600、640、667、720、768、800、853、853、960、1024、1280、1366

划分一下，大致是：

第一档在小屏幕手机：320~384

第二档在note/pad：400~900

第三档在桌面端：960~

在实际项目中统计的结果表明，手机屏幕的宽度中的95%还在320~375宽。保证手机版画面主体内容在320宽内即可。

js中我们需要动态获取手机适口的宽度window.innerWidth。

原理:那么750/375=2; 750/320=2.343等等一系列的，当手机适口不一样的时候这个比例就不同。用rem做适配，是通过手机适口的宽度/设计图，然后将这个值动态设置为font-size的值，因为得到的是小数，这时设置给font-size是不管用的，(因为font-size最小为12px)，所以用这个小数先乘以100，最后用实际测量的数除以100，得到最终的rem的值。也就是测量为200px就写成为 2rem.

(function(doc,win){ 

    var docEl =doc.documentElement, 

            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 

            recalc = function(){ 

                var clientWidth = docEl.clientWidth>750 ? 750 :docEl.clientWidth; 

                if (!clientWidth) {return}; 

                docEl.style.fontSize = 100 * (clientWidth/750) + 'px'; 

            }; 

    recalc(); 

    if (!doc.addEventListener) return; 

    win.addEventListener(resizeEvt, recalc, false); 

    doc.addEventListener('DOMContentLoaded', recalc, false); 

})(document,window)

那么举例子：比如是2倍比的情况下，设计图100px的一个div,那么我们就可以写成1rem,用100除以100得出，那么如是是2.342这个比例的话，作为程序员的我们不可能拿一个计算器，一个div一个div的计算转化之后的rem值,这样太费劲量。初中数学有个公式，倒数的概念，除以一个数等于乘这个数的倒数，比如除以2等于✖️二分之一，从计算的角度来说方便了很多，所以我们可以将除法改为乘法，但是还有个问题，手机适口的宽度除以750px 得到的是一个小数，将这个小数给font-size设置是不管用的，因为font-size最小为12px,所以我们可以给我这个小数乘以100，那么在实际测量的时候子再给测量的数除以100，就达到了我们所说的量的数除以100，等于我们设计图上的尺寸。所以100px=1rem。

用测量的尺寸除以100，主要的目的是使得比例是一样的。这样才能等比例的缩放。