轉：https://www.cnblogs.com/liu-di/p/11254583.html
一、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為基准**