為什么要用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;
}