優雅的使用 rem 進行移動端佈局開發

緣起

在工做中，移動APP端的同窗問我，在移動web端中是如何去作不一樣的屏幕大小所展現的效果和設計圖都是一致的？

咱們在遇到這種問題的時候，腦海中第一反應，應該是使用哪一種佈局方案去實現這種效果吧？

佈局方案

先說說佈局方案，在前端歷史計劃中，誕生了幾種佈局概念，分別是：

1. 靜態佈局
2. 流式佈局
3. 自適應佈局
4. 響應式佈局
5. 彈性佈局

題外話

這其中，因 bootstrap 的緣由，咱們對響應式佈局絕對是很熟悉的，它的柵格系統就是使用了響應式佈局方案。 那麼靜態佈局，也是咱們常用在 PC 當中，可是隨着科技的發展，愈來愈多的屏幕大小，以致於靜態佈局再也知足不了咱們需求了，這時候自適應佈局就出來了，根據不一樣尺寸和設備切換不一樣的樣式。關於佈局概念，本文就不作過多的介紹，切入正題。

rem 佈局

一樣相對於 PC 端，有很多的屏幕尺寸須要作兼容處理，那麼移動端也是不例外的，並且移動端的機型是比較複雜的，那麼就須要一套比較完善的佈局方案來支持了。

因淘寶的 Flexible 讓rem佈局火了起來，致使前端圈中出現了不少的 rem 佈局方案，我就是 rem 佈局方案的崇拜者，那麼就來講說 rem 佈局。

rem是什麼

rem（font size of the root element）是指相對於根元素的字體大小的單位，簡單的說它就是一個相對單位。

在面試中，我常常會問答 rem 和 em 的區別，獲得的答案也是各有千秋，那麼，到底該怎麼去理解兩個單位？

其實 em（font size of the element）也是一個相對單位。只是 em 相對於父元素的字體大小的單位。rem 是相對於根元素的字體大小的單位。

案例

剛纔咱們說到了淘寶引起的潮流，那麼咱們在說幾個：亞馬遜、攜程、京東、噹噹這些網站都有使用了的 rem 的佈局方案。

rem + flex 佈局方案

rem 的佈局，你們都知道就是操做 html 根元素的字體大小來實現的不一樣尺寸單位的換算。這裏重點的就是根元素字體大小的設置，以前我所使用的是經過媒體查詢來設置不一樣的大小，好比：

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

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

@media screen and (max-width: 320px) {
  html {
    font-size: 12px
  }
}
複製代碼

因視窗單位的設備支持度愈來愈好，因此就有了

html{
    font-size: calc(100vw/7.5);
}
複製代碼

再配合 js 處理不支持視窗單位的設備

document.documentElement.style.fontSize = window.innerWidth/7.5 + 'px'
複製代碼

可能這裏，就會有朋友問我，爲何這裏要除於 7.5 呢?

**答：**這裏是由於不少設計稿都是基於 iPhone6 來設計的，通常都是 750px（2 倍圖，iPhone6 的設備寬度爲 375px）因此除於 7.5 是爲了在 iPhone6 設備下讓 1rem 等於 100px，固然這個能夠根據你設計稿來定。

如何在 css 中根據設計圖的 px 尺寸來緩存 rem 尺寸呢？

這裏，我將使用 scss 的便捷來處理單位的換算：

@function px2rem($px, $base-font-size: 50px) {
  @if (unitless($px)) {
    @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
    @return px2rem($px + 0px); // That may fail.
  } @else if (unit($px) == rem) {
    @return $px;
  }
  @return ($px / $base-font-size) * 1rem;
}
複製代碼

由於這裏的設計圖使用的是 1 倍圖，因此$base-font-size爲 100px / 2 = 50px

div {
    width: px2rem(100px);
}
複製代碼

換算結果

div {
    width: 2rem;
}
複製代碼

到這裏，咱們的 rem 佈局使用就已經完成了，那麼在實際工做當中，確定一個 rem 是解決不了全部的佈局需求的，那麼這裏咱們在配合着 flex 佈局，就能解決一大半的佈局問題了，關於 flex 佈局，我將會在下文中分享！

最後，感謝各位的耐心閱讀，若是文中有不對或不全之處，歡迎留言指教！

在最後，若是感受本文不錯或對你有幫助，不妨點個讚唄！

做者：falost

原文地址：falost.cc/article/5d5…