動態REM

東方來客發表於2018-09-03
REM

動態REM是一種手機專用的適配方案，不是響應式的方案。

REM是什麼？

CSS有很多長度單位，rem也是其中之一。它的單位代表根元素（<html>）的 font-size 大小,一般預設的字型大小是16px，那麼 1rem === 16px; 。另外還有常見的 vh，即viewport height視口高度， 100vh === 視口高度；與之對應的還有 vw，即viewport width視口寬度， 同樣的100vw === 視口寬度。 舉例：

<p>
力拔山兮氣蓋世，
時不利兮騅不逝。
騅不逝兮可奈何，
虞兮虞兮奈若何！
</p>
<!--為其設定字型大小為1rem-->
p{
    fong-size: 1rem;
}
複製程式碼

動態REM
此時字型大小為16px;因為rem的大小取決於 <html>的大小，而其預設大小為16px; 來更改一下html{ font-size: 20px; }，可看到計算出的字型大小也改為20px;

動態REM
再在<body>中新增文字，其大小也發生了改變，為20px,是因為兒子要繼承父親嘛~

那麼長相相似的rem和em的區別是什麼呢？

答案就是在自身設定em為單位後會繼承父元素的字型大小，如果自身設定了字型大小後則用其本身的大小（如設定line-height）。

動態REM

其思想時讓font-size等於頁面的寬度，rem依賴於fonzt-size,就是間接依賴於page的寬度。實現方法如下：

<script>
let pageWidth = window.innerWidth
document.write('<style>html{font-size:' + pageWidth + '}</style>')
</script>
複製程式碼

接下來做一個demo來看看：

  <div class="parent clearfix">
    <div class="child">力拔山兮氣蓋世</div>
    <div class="child">時不利兮騅不逝</div>
    <div class="child">騅不逝兮可奈何</div>
    <div class="child">虞兮虞兮奈若何</div>
  </div>
複製程式碼
*{margin:0;padding:0;}
body{
  font-size: 16px;
}
.child{
  height:0.2rem;
  width: 0.4rem;
  margin: 0.05rem 0.05rem;
  float:left;
  background: cyan;
  text-align: center;
  line-height:0.2rem;
}
.clearfix::after{
  content:'';
  display:block;
  clear: both;
}
複製程式碼

如此便實現了一個動態rem的小demo

動態REM

如果寫小數覺得不方便，那麼在設定html寬度時可以除以10之類的倍數，這樣在為樣式設定大小時就能乘以相應的倍數啦。

像這樣寫rem老是需要計算，那麼有沒有別的方法讓我們直接寫畫素數呢？

@function px($px ){
    @return $px/$designWidth*10 + rem
}
$designWidth: 640    //設計稿的寬度
複製程式碼

這樣在設定長度的時候直接寫px(畫素數)即可，然後通過sass的sass --watch input:output實時的將scss轉換為css即可。如果你沒有安裝sass那麼就在網際網路上搜尋一下吧~~

相關文章