px-rem自适应转换

当前团队开发过程，存在2种度量单位（px、rem）各有说辞
px：各个终端统一大小，简单明了，未尝不可！
rem:大屏幕显示大字体，小屏幕显示小字体，渐进增强视觉感。
业界各种写法都有，不逐一讨论。
团队呼声：使用rem,达到字体渐进增强视觉感。
得出一套简洁的rem计算自适应方法！大喜！

核心换算片段如下
---------------------------------------------
<script>
function Rem() {
var docEl = document.documentElement,
oSize = docEl.clientWidth / 6.4;

if (oSize > 100) {
oSize = 100; // 限制rem值 640 / 6.4 =100
}

docEl.style.fontSize = oSize + 'px';
}
window.addEventListener('resize', Rem, false);
Rem();
</script>

---------------------------------------------------

A: oSize = docEl.clientWidth/7.5; //设计稿默认750px宽度，这样7.5,如果设计稿是640px宽度，这个7.5就修改6.4

B: if(oSize>85){
oSize = 85; // 限制rem值 640 / 7.5 ≈ 85
}
640是max-width:640px这样的屏幕宽度，7.5是设计搞是750px
如果设计稿是 640px.则 640/6.4这样去
一把移动端页面 在 body处 设置 max-width:640px

如上加入这段代码，下面写单位的时候，直接按照PSD里面的标准大小除以100即可。
如：标注28px.则写 0.28rem即可！
自适应，体验性！beautiful!在各个终端完全自适应大小！伸缩自如！

媒体查询？那么一大段？分批次去写？NO,NO,NO.还得去适配。
工具换算？NO，NO!还得安装插件。

有了此REM()代码片段，再也不用担心产品,UI说这里小，那里大，不信？你试试！

附件有详细参考demo,包含了reset样式及对应的rem自适应demo.还有flex对齐实现左中右自适应对齐的demo

如下图所示

----------------------------

--

------------------------------------------

多谢 江华(一棵树)的rem思想,多谢白树flex的对齐.互联网,有你很好!仅此备份,学习参考

下载地址:http://files.cnblogs.com/files/leshao/px-rem%E8%87%AA%E9%80%82%E5%BA%94%E8%BD%AC%E6%8D%A2.rar