一肥败、rem介紹
rem是什么？
它的全稱是 font size of the root element? （根元素的字體大小）
它是CSS3中新增加的一個(gè)尺寸（度量）單位馒稍，根節(jié)點(diǎn)（html）的font-size決定了rem的尺寸皿哨，也就是說它是一個(gè)相對(duì)單位，相對(duì)于(html)纽谒。
瀏覽器的默認(rèn)字體证膨？
瀏覽器的默認(rèn)的font-size是16px，1rem默認(rèn)就等于16px鼓黔。（chrome最小字體為12px）
rem可以做什么及它的應(yīng)用場(chǎng)景央勒？
用來做web app的屏幕適配，因?yàn)椴煌謾C(jī)型號(hào)的屏幕大小都不同澳化，所以這時(shí)候我們就不能用px來做單位崔步，rem是適配不同手機(jī)屏幕的一種方案。
設(shè)置的font-size來改變r(jià)em尺寸
:root{font-size:20px; }.box{width:1rem;height:1rem;background-color:purple; }
將根元素html的font-size設(shè)置為20px缎谷，此時(shí)box的寬高都為20px井濒，也就是1rem = 20px
##二、步驟###1. 首先用js根據(jù)不同的視窗寬度動(dòng)態(tài)的改變根元素的font-size```//獲取視窗寬度（兼容性寫法）let rootWidth = document.documentElement.clientWidth || document.body.clientWidth;
//獲取html元素
let rootDom = document.querySelector('html');
//動(dòng)態(tài)設(shè)置html的font-size（除以10是讓瀏覽器的font-size達(dá)到比較合適目的）
rootDom.style.fontSize = rootWidth / 10 + 'px';
###2. 根據(jù)設(shè)計(jì)師的設(shè)計(jì)稿中的px單位轉(zhuǎn)換成rem單位
####如何正確的通過px值計(jì)算rem值
**px單位 / font-size【動(dòng)態(tài)】 = rem單位【動(dòng)態(tài)】 （錯(cuò)誤的想法列林，有的小伙伴迷糊在這里）****px單位 / font-size【固定】 = rem單位【固定】 （正確的想法瑞你，有的小伙伴可能開始想不明白）*****這里要注意的是你計(jì)算的font-size是固定的，而不是html的font-size是固定的希痴，很多新人困惑在這里***
**錯(cuò)誤的計(jì)算方法：（動(dòng)態(tài)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值 和 動(dòng)態(tài)的font-size值）求出了動(dòng)態(tài)的rem***
**按照這樣的方式設(shè)置rem捏悬，在不同的尺寸的機(jī)型下都是500px，那我還不如直接寫死500px润梯，因?yàn)槠聊坏某叽绱笮《际遣煌墓溃晕覀冞@樣做毫無意義。（相當(dāng)于我們根據(jù)一個(gè)固定的px值求不同機(jī)型下的rem值）纺铭。**
**正確的計(jì)算方法：（固定font-size）以iphone6為基準(zhǔn)****200px / (375 / 10)【iphone6】 = 5.333rem**
**這樣的話**
**在【iphone5】下5.333rem 就是170px****在【iphone6】下5.333rem 就是200px****在【ipad】下5.333rem 就是410px**
**也可以以【iphone5】為基準(zhǔn)****200px / (320 / 10) 【iphone5】 = 6.25rem**
**這樣的話**
**在【iphone5】下6.25em 就是200px****在【iphone6】下6.25rem 就是234px****在【ipad】下6.25rem 就是480px**
**這樣就達(dá)到用rem來適配不同尺寸的屏幕了**
**我們以一種機(jī)型的font-size為基準(zhǔn)寇钉，來計(jì)算出一個(gè)固定的rem，根元素html的font-size是動(dòng)態(tài)的舶赔，所以這個(gè)rem值會(huì)根據(jù)不同機(jī)型的font-size達(dá)到適配的目的（注意：你參與計(jì)算的font-size值絕不能是動(dòng)態(tài)的扫倡，否則毫無意義）。**
**設(shè)計(jì)師常選擇iPhone6作為基準(zhǔn)設(shè)計(jì)尺寸竟纳，我們一般以iPhone6為基準(zhǔn)**
