单位px 转换成 rem

<script type="text/javascript">
    var oHtml = document.documentElement;
    getSize();
    window.onresize = function(){
        getSize();
    };
    function getSize(){
        var screenWidth = oHtml.clientWidth;
        if (screenWidth < 320) {
            oHtml.style.fontSize = '42.6667px';
        } else if(screenWidth > 750){
            oHtml.style.fontSize = '100px';
        }else{
            oHtml.style.fontSize = screenWidth/(750/100) + 'px';
        }
    }
</script>

100px = 1.0rem;
上面这种状况会出现文字过小显示浏览器默认文本大小的状况，如下这种处理方式我的感受更好一点

# 关于px转rem## 实现功能根据UED给出的不一样分辨率设计稿，将px转成rem## 原理1. 自定义html基数: font-size: 10px, 获取clientWidth 和 分辨率2. clientWidth < 320 || clientWidth > 750 自定义大小   其余： 根据公式：clientWidth ／ (分辨率 ／ (分辨率／html基数)）   ## 说明font-size: 不推荐使用rem,会存在必定问题,能够使用@media方式解决；其余状况都可使用rem，如：width,height,line-height,margin,padding等## 代码### style.csshtml {    /*         10 / 16 * 100% = 62.5%    */    font-size: 62.5%;  // font-size: 10px;}### index.html        (function() {            var oHtml = document.documentElement;            getSize();            // 当页面没有刷新单屏幕尺寸发生变化时，实时自适应。例：竖屏 转 横屏            window.onresize = function () {                getSize();            }            function getSize() {                var screenWidth = oHtml.clientWidth;                                // screenWidth < 320 || screenWidth > 750 时                /* 方法一： 经过媒体查询 (不是一直都须要的，处理特殊状况时须要)                    html{font-size: 10px}                    @media screen and (max-width:320px) {html{font-size:10px}} // 设置文本font-size时，要具体到class                    @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}                    @media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}                    @media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}                    @media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}                    @media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}                    @media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}                    @media screen and (min-width:800px){html{font-size:25px}}                *／                // 方法二：给出不一样的值                if (screenWidth < 320) {                    oHtml.style.fontSize = '10px';                } else if (screenWidth > 750) {                    oHtml.style.fontSize = '20px';                } else {                    // 因为设计稿分辨率的不一样，这里screenWidth 所除的值也会随之修改，                    // 例：当设计稿给出750像素时，oHtml.style.fontSize = screenWidth / 75 + 'px';                    // 当设计稿给出375像素时                    oHtml.style.fontSize = screenWidth / 37.5 + 'px';                };            }        }())