为何要用rem

为何要用rem

• 参考文章web app变革之rem
• 公司使用的375*667（也就是iPhone6）做为缩放比例标准，设计师是按照750px的标准出图
• 为了保证在不一样的屏幕下显示效果基本等同，为此规定了缩放比例 document.documentElement.clientWidth / 25 = 15
• 这里的根字体大小能够按照喜爱自定义
• 所以在计算rem值时,须要按照设计师给定的px值除以50，如给定字体大小为30px，那么计算出来的rem是30/2/25=.6rem
• 下面的css只是罗列了基本常见的机型，实际上经过js来计算更易读易维护，以下

/*默认根字体值50px,计算rem值时，个人习惯是先将UI给的值/2,而后再/25*/    
/*测试一下看看是否是全部的比例都是15*/
html {
    font-size: 50px
}

body {
    font-size: 24px
}

@media screen and (min-width: 320px) {
    html {
        font-size:21.333333333333332px
    }

    body {
        font-size: 12px
    }
}

@media screen and (min-width: 360px) {
    html {
        font-size:24px
    }

    body {
        font-size: 12px
    }
}

@media screen and (min-width: 375px) {
    html {
        font-size:25px
    }

    body {
        font-size: 12px
    }
}

@media screen and (min-width: 384px) {
    html {
        font-size:25.6px
    }

    body {
        font-size: 14px
    }
}

@media screen and (min-width: 400px) {
    html {
        font-size:26.666666666666668px
    }

    body {
        font-size: 14px
    }
}

@media screen and (min-width: 414px) {
    html {
        font-size:27.6px
    }

    body {
        font-size: 14px
    }
}

@media screen and (min-width: 424px) {
    html {
        font-size:28.266666666666667px
    }

    body {
        font-size: 14px
    }
}

@media screen and (min-width: 480px) {
    html {
        font-size:32px
    }

    body {
        font-size: 15.36px
    }
}

@media screen and (min-width: 540px) {
    html {
        font-size:36px
    }

    body {
        font-size: 17.28px
    }
}

@media screen and (min-width: 720px) {
    html {
        font-size:48px
    }

    body {
        font-size: 23.04px
    }
}

@media screen and (min-width: 750px) {
    html {
        font-size:50px
    }

    body {
        font-size: 24px
    }
}

(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’,
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            /*选定一款机型做为缩放标准*/
            docEl.style.fontSize = 25 * (clientWidth / 375) + ‘px’;
            /*根字体最大50px*/
            docEl.style.fontSize = docEl.style.fontSize > 50 ? 50 : docEl.style.fontSize;
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener(‘DOMContentLoaded’, recalc, false);
})(document, window);

为了减小同窗的工做量，就作了一个pexilToRem的对照表，以下

px	rem
1px	0.04rem
2px	0.08rem
3px	0.12rem
4px	0.16rem
5px	0.2rem
6px	0.24rem
7px	0.28rem
8px	0.32rem
9px	0.36rem
10px	0.4rem
11px	0.44rem
12px	0.48rem
13px	0.52rem
14px	0.56rem
15px	0.6rem
16px	0.64rem
17px	0.68rem
18px	0.72rem
19px	0.76rem
20px	0.8rem
21px	0.84rem
22px	0.88rem
23px	0.92rem
24px	0.96rem
25px	1rem
26px	1.04rem
27px	1.08rem
28px	1.12rem
29px	1.16rem
30px	1.2rem
31px	1.24rem
32px	1.28rem
33px	1.32rem
34px	1.36rem
35px	1.4rem
36px	1.44rem
37px	1.48rem
38px	1.52rem
39px	1.56rem
40px	1.6rem
41px	1.64rem
42px	1.68rem
43px	1.72rem
44px	1.76rem
45px	1.8rem
46px	1.84rem
47px	1.88rem
48px	1.92rem
49px	1.96rem
50px	2rem

以上是直接在控制台转换的

var pexilToRem=[];
for(var i=1;i<51;i++){
  pexilToRem.push({'px':i+'px','rem':i/25+'rem'})
}
console.table(pexilToRem)

固然也能够用scss

$browser-default-font-size: 25px !default;//变量的值能够根据本身需求定义
@function pxTorem($px){//$px为须要转换的字号
    @return $px / $browser-default-font-size * 1rem;
}