CSS3中的rem單位

一、rem介紹

rem是什么？

它的全稱是 font size of the root element （根元素的字體大小）
它是CSS3中新增加的一個尺寸（度量）單位，根節點（html）的font-size決定了rem的尺寸，也就是說它是一個相對單位，相對於(html)。

瀏覽器的默認字體？

瀏覽器的默認的font-size是16px，1rem默認就等於16px。（chrome最小字體為12px）

rem可以做什么及它的應用場景？

用來做web app的屏幕適配，因為不同手機型號的屏幕大小都不同，所以這時候我們就不能用px來做單位，rem是適配不同手機屏幕的一種方案。

設置 的font-size來改變rem尺寸

 :root{
      font-size:20px;
     }
.box{
      width:1rem;
      height:1rem;
      background-color:purple;
    }

將根元素html的font-size設置為20px，此時box的寬高都為20px，也就是1rem = 20px

##二、步驟 ###1. 首先用js根據不同的視窗寬度動態的改變根元素的font-size ``` //獲取視窗寬度（兼容性寫法） let rootWidth = document.documentElement.clientWidth || document.body.clientWidth;

//獲取html元素
let rootDom = document.querySelector('html');

//動態設置html的font-size（除以10是讓瀏覽器的font-size達到比較合適目的）
rootDom.style.fontSize = rootWidth / 10 + 'px';

<br>
###2. 根據設計師的設計稿中的px單位轉換成rem單位
<br>
####如何正確的通過px值計算rem值
<br>
**px單位  /  font-size【動態】 = rem單位【動態】 （錯誤的想法，有的小伙伴迷糊在這里）**
**px單位 / font-size【固定】 = rem單位【固定】 （正確的想法，有的小伙伴可能開始想不明白）**
***這里要注意的是你計算的font-size是固定的，而不是html的font-size是固定的，很多新人困惑在這里***
<br>
<br>
**錯誤的計算方法：（動態font-size）**
**200px /     (320 / 10)【iphone5】 = 6.25rem**  
**200px /     (375 / 10)【iphone6】 = 5.333rem**
**200px /     (768 / 10)【ipad】       = 2.604rem** 
<br>
**這樣的話**
**在【iphone5】下6.25rem 就是200px**
**在【iphone6】下5.333rem 就是200px**
**在【ipad】下2.604rem 就是200px**
<br>
我們通過了***（圖紙的px值 和 動態的font-size值）求出了動態的rem***
<br>
**按照這樣的方式設置rem，在不同的尺寸的機型下都是500px，那我還不如直接寫死500px，因為屏幕的尺寸大小都是不同的，所以我們這樣做毫無意義。（相當於我們根據一個固定的px值求不同機型下的rem值）。**
<br>
<br>
**正確的計算方法：（固定font-size）以iphone6為基准**
**200px /     (375 / 10)【iphone6】 = 5.333rem**  
<br>
**這樣的話**
<br>
**在【iphone5】下5.333rem 就是170px**
**在【iphone6】下5.333rem 就是200px**
**在【ipad】下5.333rem 就是410px**
<br>


**也可以以【iphone5】為基准**
**200px / (320 / 10) 【iphone5】 = 6.25rem**
<br>
**這樣的話**
<br>
**在【iphone5】下6.25em 就是200px**
**在【iphone6】下6.25rem 就是234px**
**在【ipad】下6.25rem 就是480px**
<br>
<br>
**這樣就達到用rem來適配不同尺寸的屏幕了**
<br>
**我們以一種機型的font-size為基准，來計算出一個固定的rem，根元素html的font-size是動態的，所以這個rem值會根據不同機型的font-size達到適配的目的（注意：你參與計算的font-size值絕不能是動態的，否則毫無意義）。**
<br>
**設計師常選擇iPhone6作為基准設計尺寸，我們一般以iPhone6為基准**