爲何要用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;
}