rem（font size of the root element）是指相對于根元素的字體大小的單位拐揭。簡單的說它就是一個相對單位玩荠，即：元素
樣式設(shè)置了n rem茬贵，其實際的像素大小為：n * html.fontSize px
將它應(yīng)用在移動端時摘完，可以通過修改html的字體大小值，改變頁面最終展示的大小羹令。
可以理解為通過改變html的字體大小鲤屡，就可以縮放頁面元素。
以設(shè)計稿750*1206為例
假設(shè)當(dāng)屏幕為750*1206時福侈，html字體大小為(750/16)px
當(dāng)屏幕為375*603時酒来，html字體大小為(375/16)px（即：縮小了一倍）
但是，通常情況下癌刽，屏幕大小都不是固定比例的役首，所以需要進(jìn)行計算，我的計算方式是將16作為基準(zhǔn)显拜，最終以屏幕大小與基準(zhǔn)的比值作為當(dāng)前頁面html的字體大小
原理
以750*1206的屏幕（設(shè)計稿大小RC）作為標(biāo)準(zhǔn)，默認(rèn)字體大小為（750/16）
如果是寬屏爹袁，則以高來計算html的字體大小基準(zhǔn)值(GC為屏幕實際大小,lastSize=16(即標(biāo)準(zhǔn)時html字體的大小基準(zhǔn)值))
? ? ? ? size = (RC.h / GC.h * GC.w) / RC.w * lastSize;
? ? ? ? fontSize = GC.w / size
? ? ? ? 理解：以高為基準(zhǔn)远荠，獲取標(biāo)準(zhǔn)高與屏幕高的比例RC.h / GC.h，再通過比例獲取到按標(biāo)準(zhǔn)比例的時候失息，寬度不變譬淳，此時的寬理應(yīng)為多少(RC.h / GC.h * GC.w)，最后通過理應(yīng)得到的寬與設(shè)計的寬的比值(RC.h / GC.h * GC.w) / RC.w來確定此時字體大小基準(zhǔn)值size盹兢，最終得到的當(dāng)前屏幕的字體大小為fontSize
如果是長屏邻梆，則以標(biāo)準(zhǔn)來計算html的字體大小
可能有人會好奇，為什么只是寬屏稍作調(diào)整绎秒，而長屏不需要呢浦妄？那是因為如果屏幕太寬，還以寬進(jìn)行適配的話见芹，就會發(fā)現(xiàn)頁面中的元素要么都擠到一起了剂娄，要么部分元素顯示不全
完整js代碼如下：
var lastSize = 16, ?// （默認(rèn)標(biāo)準(zhǔn)的html字體大小的基準(zhǔn)值，可以隨自己喜好定義玄呛，但必須與樣式統(tǒng)一）
? ? ? htmlStatus = 0,
? ? ? bodyElement = document.documentElement || document.body,
? ? ? RC = { w:750, ? ?h:1206 }, ? // 標(biāo)準(zhǔn)尺寸阅懦，即：設(shè)計稿尺寸
? ? ? GC = {
? ? ? ? ? ? ? w:bodyElement.clientWidth,
? ? ? ? ? ? ? h:bodyElement.clientHeight
? ? ? },
? ? ? rightSize = RC.w / RC.h, ? // 標(biāo)準(zhǔn)比例
? ? ? currentSize = GC.w / GC.h,
? ? ? html = document.getElementsByTagName("html")[0];
if(rightSize > currentSize){? // 長屏
? ? ? lastHTMLSize = 16;
}else if(rightSize < currentSize){? //寬屏
? ? ? lastHTMLSize = (RC.h / GC.h * GC.w) / RC.w * 16;
}
html.style.fontSize=GC.w/lastHTMLSize+'px';
以上是所有js代碼，為保證效果徘铝，最好是添加在html文件的head里
由于使用了rem耳胎，所以頁面的樣式是計算出來的惯吕，建議使用sass或less的函數(shù)進(jìn)行計算，
注意：樣式文件以設(shè)計稿為準(zhǔn)
@function rem($n){
? ? ? ? ?@return $n / (750 / 16) + rem
}
以上是最基本的代碼怕午，但這還不夠混埠，因為你會發(fā)現(xiàn)，在寬屏上頁面元素可能偏左或偏右诗轻，比較零散钳宪，所有建議以中心進(jìn)行適配，即left:50%扳炬，添加margin-left值吏颖，由于之前的縮放是寬屏按高縮放，長屏或標(biāo)準(zhǔn)屏都按標(biāo)準(zhǔn)縮放恨樟，所以不需要擔(dān)心高的問題半醉，所以高可以放心直接設(shè)置top值。
為了方便劝术，以下是個人以中心適配的計算（scss）
@function getTop($n) {
? ? ? ? ? @return ($n - 1206 / 2) / (750 / 16) + rem;
}
@function getLeft($n) {
? ? ? ? ? ?@return ($n - 750 / 2) / (750 / 16) + rem;
}
@function getRight($n) {
? ? ? ? ? ?@return (($n - 750) / 2) / (750 / 16) + rem;
}
@mixin center($left,$top) { ? // 默認(rèn)以left計算中心的
? ? ? ? ? ? position:absolute;
? ? ? ? ? ? left:50%;
? ? ? ? ? ? top: rem($top);
? ? ? ? ? ? margin:0 0 0 getLeft($left);
}
@mixin center-right($right,$top) {// 默認(rèn)以right計算中心的
? ? ? ? ? ?position:absolute;
? ? ? ? ? ?right:50%;
? ? ? ? ? ?top: rem($top);
? ? ? ? ? ?margin:0 getRight($right) 0 0;
}
@mixin centerb($left,$bottom) {// 默認(rèn)以left計算中心的,但設(shè)置bottom
? ? ? ? ? ?position:absolute;
? ? ? ? ? ?left:50%;
? ? ? ? ? ?bottom: rem($bottom);
? ? ? ? ? ?margin:0 0 0 getLeft($left);
}
以上即為全部代碼缩多，基本上可以適配任何屏幕，包括PC
我是以 750/16 作為標(biāo)準(zhǔn)去計算的值养晋，且以16為基準(zhǔn)衬吆，但這不是唯一，可以以任何值為標(biāo)準(zhǔn)去計算绳泉，但是計算方式都差不多
文檔信息
版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名
發(fā)表日期：2017年2月24日
