分享一个最好用最简单的关于rem单位定义的JS，并教你如何还原设计图，最初我也一样对rem单位的使用非常迷茫，但后来找到了一堆解决方案，像什么CSS定义，媒体查询定义，臃肿的JS定义，还各种if条件，真的，像屎一样。
分享一个最好用最简单的关于rem单位定义的JS，并教你如何还原设计图，最初我也一样对rem单位的使用非常迷茫，但后来找到了一堆解决方案，像什么CSS定义，媒体查询定义，臃肿的JS定义，还各种if条件，真的，像屎一样。
其实我之前写过一篇关于rem如何使用的方法，在此再把链接给大家粘一下，下面我就把定义的js粘过来，直接讲使用REM还原设计图的部分，如果大佬您还在迷茫，请看看那篇文章http://www.duanlonglong.com/qdjy/138.html
定义rem的js: 我定义的js 无论屏幕多宽，记住16rem永远是满屏，8rem永远是半屏的宽度。你也可以自己改，js里320除以20等于16rem满屏，你也可以将20改掉，定义16rem是有些道理的，不过不告诉你，哈哈，其实影响不大。
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth / 320 * 20 + 'px';
window.onresize = function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 320 * 20 + 'px';
};
</script>
关于还原设计图，其实在H5端的开发有一屏页面和长屏页面，一屏页面对设计图是有要求的，要求设计图为750*1206的尺寸，在此不多说关于一屏，只讲还原。
一般一个有常识的UI在设计移动端psd设计图时会将设计图宽度设为750的宽度，如果不是这个宽度，那就要我们自己转一下，如何转百度一下或让UI转一下，我相信一个前端是会简单使用PS的，因为移动端开发我就没用过UI给的图，都是自己切，话又说回来了，他们切图跟屎一样，哈哈。
上回书讲到我定义的rem永远是16rem满屏，也就是16rem就是100%的宽度，设计图750px等于100%的宽度，我们开始换算了，我在ps量了一个50px应该写多少rem呢？
750除以16等于46.875 这个结果就是1rem等于46.875PX，我们量的50px除以46.875等于1.0666666rem.看懂了没，不要傻乎乎的去算，我只是告诉你计算方法，我经常使用hbudierX开发小项目，这个编辑工具里是可以设置rem转换的，需要先在工具设置1rem等于多少px，然后写代码时写50px会出现rem的提示，此时我们直接回车便可将我们写的PX转换成rem，好用吧
阴影什么的怎么还原？下载一个像素大厨，将你的psd放进去，会有惊喜的，在了解其中的奥秘之后，不要变懒，把手写css忘记哦。
