1、為什么要用rem

博客很久沒寫了，原因很簡單。

最近接手了一個(gè)項(xiàng)目，要同時(shí)做PC和移動(dòng)端的頁面，之前沒接觸過，但畢竟給錢的是大爺，所以還是硬著頭皮上了。

移動(dòng)端最麻煩的是什么？

不同分辨率適配！

具體來說，有的屏幕320px寬，有的屏幕640px寬，有的更寬，如果你寫固定px，那么要么小的放不下，要么大的有大片空白。

怎么辦？

如果元素固定占用屏幕空間（一般是指寬度而非高度，下同）的百分之xx就ok了。

比如320px的10%是32px，640px的10%是64px，

如果10個(gè)10%寬度的元素放在一起，那肯定就是100%，即擠滿屏幕（寬度），不會(huì)超出，也不會(huì)留白。

簡單理解：
rem 就是指屏幕寬度的百分之x；
或者說，n個(gè)rem = 用戶可視區(qū)域100%寬度

注意，之所以不說高度，是因?yàn)閷挾龋▁軸）滿了后，y軸（高度）方向的內(nèi)容可以通過滾動(dòng)屏幕來查看

上實(shí)例：

1、設(shè)計(jì)師給一個(gè)640px寬度的設(shè)計(jì)圖，

2、你假定64rem=100%寬度（這里是640px），那么1rem=10px；

3、你照著寫出了靜態(tài)頁面，然后按照1rem=10px的比例，將設(shè)計(jì)圖上的元素的大小，全部用rem寫下；

4、完美，你寫的靜態(tài)頁面在640px寬度的頁面上正常展示了；

5、A用戶使用的是320px寬度的手機(jī)，因?yàn)槟慵僭O(shè)64rem=100%寬度，因此此時(shí)1rem=5px（320/64=5），于是也完美展示了；

2、rem怎么用？

rem是css單位；
1rem的大小是通過html下的font-size這個(gè)css屬性告訴瀏覽器的；
使用替換px所在的位置即可
假定你預(yù)設(shè)在設(shè)計(jì)稿的時(shí)候 1rem = 10px;

然后一個(gè)元素（class=”ele”）的寬度是20px，高度30px（設(shè)計(jì)稿），

那么你的css這么寫就可以了；

html {
  font-size: 10px;
}

.ele {
  width: 2rem;
  height 3rem;
}

3、在任何分辨率下都適用

發(fā)現(xiàn)問題在哪里了么？如何確認(rèn)1rem等于多少px？

原因是rem是css中使用的單位，css是不會(huì)幫你計(jì)算1rem是多少px的，只能通過你自己來計(jì)算。

計(jì)算方式很簡單，簡單來說：

1、你有一個(gè)設(shè)計(jì)稿A（假定640px），有一個(gè)預(yù)設(shè)的rem和px的比例B（假如是1rem = 10px）

2、獲取用戶瀏覽器的可視區(qū)域的寬度C（假如是320px），那么他此時(shí)1rem的尺寸D 可以根據(jù) B/A = D/C 這個(gè)公式得知

3、原因是你假定屏幕可以容納多少個(gè)rem，這是一個(gè)固定比例（如這里就是64rem）

1 rem = B / A * C;
//代入可得
1 rem = 10px / 640px * 320px = 5px;

4、其他

1、用戶加載完后，你就得設(shè)置好1rem的尺寸吧（記得是設(shè)置在html元素下的font-size）；

2、假如用戶屏幕的尺寸會(huì)變，你肯定得考慮吧（刷新1）；

3、你懶得去找相應(yīng)的代碼，我總得給你吧（如下）；

var fun = function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;

      //這里是假設(shè)在640px寬度設(shè)計(jì)稿的情況下，1rem = 20px；
      //可以根據(jù)實(shí)際需要修改
      docEl.style.fontSize = 20 * (clientWidth / 640) + 'px';
    };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
}
fun(document, window);

直接執(zhí)行即可

以上所述是小編給大家介紹的rem使用方法詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論