CSS3中的rem單位

1、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

2、步驟

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';

2. 根據設計師的設計稿中的px單位轉換成rem單位

如何正確的經過px值計算rem值

px單位 / font-size【動態】 = rem單位【動態】 （錯誤的想法，有的小夥伴迷糊在這裏）
px單位 / font-size【固定】 = rem單位【固定】 （正確的想法，有的小夥伴可能開始想不明白）
這裏要注意的是你計算的font-size是固定的，而不是html的font-size是固定的，不少新人困惑在這裏




錯誤的計算方法：（動態font-size）
200px / (320 / 10)【iphone5】 = 6.25rem
200px / (375 / 10)【iphone6】 = 5.333rem
200px / (768 / 10)【ipad】 = 2.604rem


這樣的話
在【iphone5】下6.25rem 就是200px
在【iphone6】下5.333rem 就是200px
在【ipad】下2.604rem 就是200px


咱們經過了（圖紙的px值 和 動態的font-size值）求出了動態的rem


按照這樣的方式設置rem，在不一樣的尺寸的機型下都是500px，那我還不如直接寫死500px，由於屏幕的尺寸大小都是不一樣的，因此咱們這樣作毫無心義。（至關於咱們根據一個固定的px值求不一樣機型下的rem值）。




正確的計算方法：（固定font-size）以iphone6爲基準
200px / (375 / 10)【iphone6】 = 5.333rem


這樣的話


在【iphone5】下5.333rem 就是170px
在【iphone6】下5.333rem 就是200px
在【ipad】下5.333rem 就是410px

也能夠以【iphone5】爲基準
200px / (320 / 10) 【iphone5】 = 6.25rem


這樣的話


在【iphone5】下6.25em 就是200px
在【iphone6】下6.25rem 就是234px
在【ipad】下6.25rem 就是480px




這樣就達到用rem來適配不一樣尺寸的屏幕了


咱們以一種機型的font-size爲基準，來計算出一個固定的rem，根元素html的font-size是動態的，因此這個rem值會根據不一樣機型的font-size達到適配的目的（注意：你參與計算的font-size值毫不能是動態的，不然毫無心義）。


設計師常選擇iPhone6做爲基準設計尺寸，咱們通常以iPhone6爲基準