js动态计算px对应的rem值

我们都知道rem和em一样是一个相对单位，不同的是em是相对于父元素的font-size，而是rem是相对于html的font-size来计算的。

在我的工作中，使用sass写了函数px2rem()

@function px2rem($px){

     @return $px*320/$designWidth/20 + rem;

}

设定了一个设计稿尺寸$designWidth，所以在scss中很方便的写px2rem()，解决了不同手机显示问题，如：

div{

    font-size:px2rem(24);

}

但是问题来了，比如我最近做了一个配置滑动模块的功能，里面的每一个元素的宽度设计稿是有给出的，但是个数是不一定的，我在初始化滑动模块的时候就需要设定宽度，那么就需要在js中动态计算。

其实不难看出，上面的px2rem函数是以屏幕的宽度（320）对比设计稿尺寸，然后以20的font-size作为1个px，那么我们就可以按照这个来：

（1）、取当前设备的宽度：var clientWidth = document.documentElement.clientWidth;

（2）、获取当前html的font-size：var htmlFontSize = $("html").css("font-size") && parseFloat($("html").css("font-size"));

（3）、得到当前1px对应的rem值：reg = (clientWidth/750)/htmlFontSize;//750是设计稿尺寸

（4）、然后就可以动态的计算当前元素的rem值，比如设计稿一个元素200px，配置了length个元素，那么滑动模块的宽度就是200*reg*length rem

我的方法可能有点笨，欢迎交流学习。