1.先設(shè)置header里面的meta標(biāo)簽：

meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1"

2.在header寫上script標(biāo)簽

document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';

要設(shè)置Html的font-size： 設(shè)置html標(biāo)簽的font-size，上面概論（使用rem為元素設(shè)定字體大小時(shí)，相對(duì)大小對(duì)比的是HTML根元素）寫的很清晰，頁面元素使用rem單位時(shí)，是相對(duì)于這個(gè)html標(biāo)簽的font-size的大小為基礎(chǔ)的。

為什么是clientWidth/640?為什么要乘以100？
2.1）例如：設(shè)計(jì)稿寬度是640px，有一個(gè)元素設(shè)計(jì)稿上的寬度是50px，設(shè)備物理寬度是320px，那么根據(jù)比率計(jì)算出實(shí)際設(shè)備里面寬度是：50*（320/640）=25px；首先這里沒有問題，實(shí)際的上的寬度根據(jù)（320/640）這個(gè)比率計(jì)算出來了是25px，這個(gè)（320/640）相當(dāng)于1rem。

2.2.1）為了計(jì)算方便 我們后面把比率乘以了100，（320/640）*100，那么相對(duì)應(yīng)這個(gè)元素在設(shè)置數(shù)值的時(shí)候就需要除以100了,這樣可以保證最后出來的數(shù)值不變，相當(dāng)于0.5rem=50*（320/640），最終出來的數(shù)值一致。 2.2.2）一般瀏覽器的最小字體是12px，如果font-size=（320/640）px，相當(dāng)于font-size=0.5px，那么這個(gè)數(shù)值就小于12px，會(huì)造成一些計(jì)算的錯(cuò)誤，和一些奇怪的問題*100后，font-size是50px。

解釋一下：設(shè)備寬度/設(shè)計(jì)稿寬度（以320/640為例）
320/640=0.5*100=50px=1rem;
然后設(shè)置html標(biāo)簽的font-size：
font-size：0.32rem=50*0.32=16px;
（這個(gè)0.32的比例是自己設(shè)置的，因?yàn)槠聊蛔钚∮玫淖疃嗟木褪?20的，這樣比較成比例！！！）
就是說在這個(gè)html里面的所有1rem=16px了。如果這個(gè)字體在設(shè)計(jì)稿上是50px 而設(shè)計(jì)稿是640的大小 那在320的屏幕上應(yīng)該是25px的大小
也就是1.5625rem大小。
公式總結(jié)：
1 rem =（ clientWidth/640）*100 *0.32= ？？ px（如上1 rem=16px）
xx px= （yy px）*（ clientWidth/640）{備注：yy：設(shè)計(jì)稿上大小；xx： 設(shè)備上具體大小}
zz rem= xx / 1rem=xx / ？？px {zz 就是你寫在css里的具體字的大小}
舉例：iphone6 寬372 設(shè)計(jì)稿還是640的(也有720的設(shè)計(jì)稿)
1 rem = 372/640*100*0.32= 18.6px

假如：設(shè)計(jì)稿是50px的
50*（372/640）=29px 實(shí)際屏幕上應(yīng)該是29px
29/18.6=1.5625rem
字體大小寫1.5625rem，和在320屏幕大小里寫的大小一樣的數(shù)值。在320寬的屏幕里就是16px大小，在372屏幕里就是29px大小。